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

user547534
October 24, 2024
47 views
0 votes
2 Answers

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>

Answers

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;
}

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers