przejścia css na nowe elementy

Question

Aug 23, 2012, 11:39 AM

css css3 css-transitions javascript firefox

przejścia css na nowe elementy

Nie mogę znaleźć sposobu na użycie przejść css na nowo utworzonych elementach dom.

powiedzmy, że mam pusty dokument html.

<body>
    <p><a href="#" onclick="return f();">click</a></p>
</body>

Mam też to css

#id {
    -moz-transition-property: opacity;
    -moz-transition-duration: 5s;
    opacity: 0;
}

#id.class {
    opacity: 1;
}

a to 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;
}

ale, jak widać,http://jsfiddle.net/gwxkW/1/ po kliknięciu element pojawia się natychmiast.

Jeśli spróbuję ustawić klasę wtimeout() i często znajdź wynik, ale dla mnie wydaje się bardziej wyścig między javascript a silnikiem css. Czy jest jakieś szczególne wydarzenie do wysłuchania? Próbowałem użyćdocument.body.addEventListener('DOMNodeInserted', ...) ale to nie działa.

Jak mogę zastosować przejścia css na nowo utworzone elementy?