CSS3 transition doesn't work when I remove class of newly created element

Question

What I do:

1. Create an element, which style contains a CSS3-transition.
2. Add a class to it (style for this class contains background-color property).
3. Add an innerHTML to it.
4. Remove the class.

When I remove the class just like

element.classList.remove('classname')

there are no transition, but when I set a timeout with 0s delay, it works:

setTimeout(function() { element.classList.remove('classname'); }, 0);

Why? How can I avoid setTimeout function or is it normal to use it?

Example: http://jsfiddle.net/JHevJ/1/

Answer 1

Because you're removing the class before the screen calculates the redrawing of elements. You're removing it before it's shown as that class in the first place, so it doesn't think an animation is necessary.

The timeout makes it so it "waits" 0 milliseconds and then removes the class, which lets it show the element with the class first, "wait" 0 time and then remove the class.