start animation with javascript 1

start animation with javascript

element.addEventListener("click", function(e){
  element.classList.remove("anim");
  setTimeout(() => element.classList.add("anim"), 0);
}, false);

Here is what the above code is Doing:
1. We’re adding an event listener to the element.
2. When the element is clicked, we’re removing the class “anim” from the element.
3. We’re adding the class “anim” to the element after a timeout of 0 milliseconds.

The reason we’re removing the class “anim” before adding it is because we want to trigger the animation again.

The reason we’re adding the class “anim” after a timeout of 0 milliseconds is because we want to wait for the browser to repaint the element before we add the class “anim” to it.

If we don’t wait for the browser to repaint the element, the animation won’t be triggered.

Similar Posts