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?
question from:
https://stackoverflow.com/questions/12088819/css-transitions-on-new-elements 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
