Trigering una transizione CSS3 con l'aggiunta di una classe con Jquery

Question

Al momento ho un violino in esecuzione che sto cercando di ottenere una transizione di opacità css3 da attivare quando aggiungo una classe ad esso. L'impostazione di base è che faccio clic su un pulsante e quindi attraverso jquery aggiungo un div al dom e dopo che aggiungo quell'elemento alla dom, quindi aggiungo una classe. L'aggiunta di una classe a quel nuovo elemento dom suppone di dare il via alla mia transizione ma non lo è, l'unica cosa che sta accadendo è che l'elemento viene mostrato ma la transizione di opacità non funziona. Qualsiasi aiuto sarà molto apprezzato, sto lasciando un collegamento al violino qui fiddle link. E sì, so che potrei fare la dissolvenza con solo jquery, ma questo è solo un esperimento, che probabilmente sarebbe usato per dare il via ad altri css transizione other then opacity

Answer 1

Non credo che le transizioni CSS3 siano ancora supportate su elementi creati dinamicamente. Ho provato a modificare il campione posizionando lo div direttamente nell'HTML e le transizioni hanno funzionato correttamente. Potrebbe essere necessario convivere con questo come soluzione alternativa finché il supporto del browser non migliora.

Answer 2

Ho riscontrato questo problema in precedenza, l'unica soluzione che ho trovato è l'aggiunta di un setTimeout per far notare al DOM che c'è un nuovo elemento. Può essere pari a zero ms e continuerà a funzionare:

$('button').live('click', function() { 
    $(this).after("<div class='fade'>This is just a test</div>") 
    setTimeout(function(){$(".fade").addClass("in");}, 0) 
}); 

http://jsfiddle.net/tfmFx/