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

Html – How to run CSS keyframes animation when the class is removed

How can I use the CSS animation when the class is removed?
If you look on my easy example here: https://codepen.io/MichaelRydl/pen/MWPvxex – how can I achieve, that the animation run (but reversed) on clicking the button which removes the class?

const elementTwo = document.getElementById("element-two");
const addButton = document.getElementById("add-button");
const removeButton = document.getElementById("remove-button");

addButton.addEventListener("click", () => {
  elementTwo.classList.add("animated");
})

removeButton.addEventListener("click", () => {
  elementTwo.classList.remove("animated");
})
button {
  margin-top: 10px;
}

#element-one {
  width: 500px;
  height: 30px;
  background-color: lightgrey;
  border-radius: 8px;
  positon: absolute;
}

.animated {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  border-radius: 8px;
  position: relative;
  top: 0;
  left: 0;
  animation-name: animateWidth;
  animation-duration: 0.4s;
}

@keyframes animateWidth {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
<div>
  <div id="element-one">
    <div id="element-two"></div>
  </div>
  <button id="add-button">Add Class</button>
  <button id="remove-button">Remove Class</button>
</div>

To be concrete, when I press the first button from the example, it adds the class to the element and runs the width animation, but I don’t know how can I run the backward animation when I press the second button from the example which removes the class.

Thanks for your help.

Tags:

2

Answers


  1. 0

    It seems like you are actually after a transition:

    const elementTwo = document.getElementById("element-two");
const addButton = document.getElementById("add-button");
const removeButton = document.getElementById("remove-button");

addButton.addEventListener("click", () => {
  elementTwo.classList.add("animated");
})

removeButton.addEventListener("click", () => {
  elementTwo.classList.remove("animated");
})
    button {
  margin-top: 10px;
}

#element-one {
  width: 500px;
  height: 30px;
  background-color: lightgrey;
  border-radius: 8px;
  positon: absolute;
}

[id=element-two] {
  width: 0;
  height: 100%;
  background-color: lightblue;
  border-radius: 8px;
  position: relative;
  top: 0;
  left: 0;
  transition: width 0.4s;
}

.animated {
  width: 100%;
}
    <div>
  <div id="element-one">
    <div id="element-two"></div>
  </div>
  <button id="add-button">Add Class</button>
  <button id="remove-button">Remove Class</button>
</div>

    Furthermore as a bonus, you could consider using transform: scaleX() instead for better animation performance, as width means the browser has to do layout, compositing and painting whereas transform the browser only has to do compositing and painting:

    const elementTwo = document.getElementById("element-two");
const addButton = document.getElementById("add-button");
const removeButton = document.getElementById("remove-button");

addButton.addEventListener("click", () => {
  elementTwo.classList.add("animated");
})

removeButton.addEventListener("click", () => {
  elementTwo.classList.remove("animated");
})
    button {
  margin-top: 10px;
}

#element-one {
  width: 500px;
  height: 30px;
  background-color: lightgrey;
  border-radius: 8px;
  overflow: hidden;
  positon: absolute;
}

[id=element-two] {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  border-radius: 8px;
  position: relative;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}

.animated {
  transform: scaleX(1);
}
    <div>
  <div id="element-one">
    <div id="element-two"></div>
  </div>
  <button id="add-button">Add Class</button>
  <button id="remove-button">Remove Class</button>
</div>
    Login or Signup to reply.
  2. 0

    You need to move the transition/animation to the element that you want the effect on so that it fires both when added and removed. See:

    const elementOne = document.querySelector(".element-one");
const addButton = document.getElementById("add-button");
const removeButton = document.getElementById("remove-button");

addButton.addEventListener("click", () => {
  elementOne.classList.add("animated");
})

removeButton.addEventListener("click", () => {
  elementOne.classList.remove("animated");
})
    button {
  margin-top: 10px;
}

.element-one {
  width: 500px;
  height: 30px;
  background-color: lightgrey;
  border-radius: 8px;
  positon: absolute;
  transition: background-color 1000ms linear;
}

.animated {

  background-color: lightblue;

}
    <div>
  <div class="element-one">

  </div>
  <button id="add-button">Add Class</button>
  <button id="remove-button">Remove Class</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search