CSS3 transitions to dynamically created elements

Question

I\'m trying to animate a dynamically created html element with CSS3 transitions.

I want the animation to start just before the ele

Answer 1

You don't need to use a timeout. Timeout works because the page is reflowed between setting styles. Reflowing recalculates the styles.If you don't recalculate the styles, the second style simply overwrites the first. That's the real issue.

Rather, you can simply:

obj.className = style1;
window.getComputedStyle(obj).getPropertyValue("top");
obj.className = style2;

If you're animating multiple objects, you only need to "pump" the style calculator once:

obj.className = style1;
obj2.className = style1;
obj3.className = style1;
window.getComputedStyle(obj).getPropertyValue("top");

obj.className = style2;
obj2.className = style2;
obj3.className = style2;

Tested in chrome12 on mac