setTimeout with 0ms needed to remove animation class

Question

I have a simple animation class in css:

.slides-animation {
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

So I can toggle it in a div with classList.add and classList.remove. It's normaly active, but I want to remove it, call a function and add it again.

element.classList.remove("slides-animation");
moveNow(element); // Update the translate(x,y) coordinates of the element.
element.classList.add("slides-animation");

But it didnt work as expected. The animation is still there. I managed to remove it by adding a timeout this way:

element.classList.remove("slides-animation");
moveNow(element); // Update the translate(x,y) coordinates of the element.
setTimeout(function(){element.classList.add("slides-animation")}, 0)

Now, the element will translate to a new (x,y) with no animation. How is this working ?

I have read that by using timeout in this way you will assure that one function will be executed after the other. But, how was the class added again before moveTo(element)returned ?

When removing and adding the same class within the same "cycle" without a browser repaint, nothing happens, as expected, javascript doesn't even remove the class, because that line has already been overwritten by the time it gets to executing it. — adeneo, Oct 05 '16 at 14:41

setTimeout with 0ms needed to remove animation class

0 Answers0