Appliquer une tansition CSS3 ajouté & triggé par JS sur un elt DOM append en JS?!

[Argorate]

[Question pour un champion] Apriori le fait d'ajouter du DOM avec le JS donne lieu a une sorte de temps de latence avant de pouvoir l'utiliser, voilà pourquoi : http://jsfiddle.net/31d57n55/9/ ça marche pas
mais setTimeout de 0 (oui oui de 0...) http://jsfiddle.net/31d57n55/8/ , ça marche...
J'ai l'impression qu'appliqué dans la meme frame, l'ajout du DOM et une transition ne fonctionne pas. C'est assez étrange^^

Alors, qui sera notre champion?


PS: la transition n'est pas décrite en CSS car elle est dynamique dans mon use case, donc doit être ajouté en JS.

[@lucard]

j'y connais rien en Js mais

$('<div id="foo"></div>').appendTo('body');

setTimeout(function(){

$('#foo').css({height: '100px', transition: 'height 5s linear'});

}, 0);

le 0 correspond à "départ après 0 milliseconde"

si tu mets

$('<div id="foo"></div>').appendTo('body');

setTimeout(function(){

$('#foo').css({height: '100px', transition: 'height 5s linear'});

}, 5000);

le départ de l'anime se fera après 5 secondes

c'est quoi la question ?

[Argorate]

Non en fait le problème vient du fait que quand tu modifies l'élément que tu viens de créer dans le même tick JS, il considère ça comme une surcharge et pas une modification, hors le trigger d'une transition c'est la modification.

Du coup, si quelqu'un à mieux que le hack du setTimeout, je suis preneur ^^

[Xenos]

$('<div id="foo"></div>').appendTo('body');

$('#foo').css('height');

$('#foo').css({height: '100px', transition: 'height 5s linear'});

En cherchant...

[Argorate]

Il y a aussi le hack du setTimeout. Mais tout ça reste du hack.
Cependant ça parait moins chiant à écrire comme hack, donc c déjà ça.