css transitions on new elements
css, css-transitions, firefox, javascript
Solution
`requestAnimationFrame()` (https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame) appears to work across Firefox, Chrome and Safari. A more reliable, logical solution that `setTimeout()`. For older browsers (IE8), it will require a Polyfill (naturally, the transition won't occur, but the CSS will still change).
Problem
I cannot find a way to use css transitions on newly created dom elements. let's say I have an empty html document. ``` <body> <p><a href="#" onclick="return f();">click</a></p> </body> ``` I also have this css ``` #id { -moz-transition-property: opacity; -moz-transition-duration: 5s; opacity: 0; } #id.class { opacity: 1; } ``` and this js ``` function f() { var a = document.createElement('a'); a.id = 'id'; a.text = ' fading in?'; document.getElementsByTagName('p')[0].appendChild(a); // at this point I expect the span element to be with opacity=0 a.className = 'class'; // now I expect the css transition to go and "fade in" the a return false; } ``` but, as you can see on http://jsfiddle.net/gwxkW/1/ when you click the element appears instantaneously. If I try to set the class in a `timeout()` i often find the result, but to me it seems more a race between javascript and the css engine. Is there some specific event to listen? I tried to use `document.body.addEventListener('DOMNodeInserted', ...)` but it's not working. How can I apply css transitions on newly created elements?