Html Question posted in
Some basic documentation can be found here.

Html – Toggle animation to show/hide Div by slidding style

I want to paly second div animation within its parent row only. Right now the second div is moving out of the row boundary. How can I handle this? This is my first time trying first time animation. Thanks in advance.

function test(event) {
  var checkbox = document.getElementById('toggle');
  var firstDiv = document.getElementById('firstDiv');
  var secondDiv = document.getElementById('secondDiv');

  if (checkbox.checked) {
    secondDiv.classList.remove('col-lg-12')
    secondDiv.classList.remove('slide-in');
    secondDiv.classList.add('col-lg-7')
    secondDiv.classList.add('slide-out');
    //firstDiv.style.display = 'block';
    secondDiv.addEventListener('animationend', function() {
      firstDiv.style.display = 'block';
    }, {
      once: true
    });
  } else {
    firstDiv.style.display = 'none';
    secondDiv.classList.remove('slide-out');
    secondDiv.classList.remove('col-lg-7')
    secondDiv.classList.add('col-lg-12')
    secondDiv.classList.add('slide-in');
  }
}
.slide-in {
  animation: slide-in 3s forwards;
}

.slide-out {
  animation: slide-out 3s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.row {
  border: 1px solid black;
  /* Added row border */
  width: 500px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
  <div id="firstDiv" style="background-color:palegreen" class="col-lg-5">first</div>
  <div id="secondDiv" style="background-color:yellow" class="col-lg-7">Second</div>
</div>
<div>
  <input type="checkbox" id="toggle" checked="checked" onchange="test(event)">
  <label for="toggle">Toggle Animation</label>
</div>
Tags:

2

Answers


  1. 0

    I have tried to resolve your issue.

    You’re moving the div by 100% using animation.

    .slide-in {
  animation: slide-in 3s forwards;
}

.slide-out {
  animation: slide-out 3s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.row {
  border: 1px solid black;
  /* Added row border */
  width: 500px;
}

    OR you can change the direction.

    .slide-in {
  animation: slide-in 3s forwards;
}

.slide-out {
  animation: slide-out 3s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.row {
  border: 1px solid black;
  /* Added row border */
  width: 500px;
}
    Login or Signup to reply.
  2. 0

    Solution is pretty simple but let me explain what is cause of issue first. The div is currently overflowing out of its parent div due to which you can see div moving out of parent div border. To fix this issue you just need to add overflow: hidden to row and it will be fixed.

    Below is working example and if I have missed something then do share.

    function test(event) {
  var checkbox = document.getElementById('toggle');
  var firstDiv = document.getElementById('firstDiv');
  var secondDiv = document.getElementById('secondDiv');

  if (checkbox.checked) {
    secondDiv.classList.remove('col-lg-12')
    secondDiv.classList.remove('slide-in');
    secondDiv.classList.add('col-lg-7')
    secondDiv.classList.add('slide-out');
    //firstDiv.style.display = 'block';
    secondDiv.addEventListener('animationend', function() {
      firstDiv.style.display = 'block';
    }, {
      once: true
    });
  } else {
    firstDiv.style.display = 'none';
    secondDiv.classList.remove('slide-out');
    secondDiv.classList.remove('col-lg-7')
    secondDiv.classList.add('col-lg-12')
    secondDiv.classList.add('slide-in');
  }
}
    .slide-in {
  animation: slide-in 3s forwards;
}

.slide-out {
  animation: slide-out 3s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.row {
  border: 1px solid black;
  /* Added row border */
  width: 500px;
  overflow: hidden;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
  <div id="firstDiv" style="background-color:palegreen" class="col-lg-5">first</div>
  <div id="secondDiv" style="background-color:yellow" class="col-lg-7">Second</div>
</div>
<div>
  <input type="checkbox" id="toggle" checked="checked" onchange="test(event)">
  <label for="toggle">Toggle Animation</label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search