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>

You need to sign in to view this answers

Related Post