Trigering a CSS3 Transition con la adición de una clase con Jquery

Question

Por el momento tengo un violín corriendo que estoy tratando de obtener una transición de opacidad css3 para disparar cuando agrego una clase a él. La configuración básica es que hago clic en un botón y luego, a través de jquery, agrego un div al dom y después de agregar ese elemento al dom, le agrego una clase. La clase de adición a ese nuevo elemento dom se supone que iniciará mi transición pero no lo es, lo único que está sucediendo es que el elemento se muestra pero la transición de opacidad no está funcionando. Cualquier ayuda será muy apreciada, estoy dejando un enlace al violín aquí fiddle link. Y sí, sé que podría hacer el desvanecimiento con solo jquery, pero esto es solo un experimento, que probablemente se utilizaría para iniciar otros CSS transición distinta a la opacidad

Answer 1

No creo que las transiciones CSS3 sean compatibles con elementos creados dinámicamente todavía. Intenté modificar tu muestra colocando el div directamente en el HTML, y las transiciones funcionaron bien. Puede que tenga que vivir con eso como una solución alternativa hasta que mejore la compatibilidad con el navegador.

Answer 2

He encontrado este problema antes, la única solución que he encontrado es agregar un setTimeout para que el DOM advierta que hay un elemento nuevo. Puede ser cero ms y seguirá siendo el trabajo:

$('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/