CSS-Übergänge funktionieren nicht, wenn ich Timeout

Question

verwende Ich habe ein paar Klassen: hide ist display: none und transparent ist opacity: 0. Das Element pr_container hat -webkit-transition: opacity 1s. Der folgende JQuery-basierte Code macht ein Element in einem animierten fasion erscheinen:

pr_container.removeClass("hide"); 
setTimeout(function() { pr_container.removeClass("transparent"); }, 0); 

Allerdings, wenn ich setTimeout entfernen und stattdessen nur die zweite Klasse entfernen, gibt es keine Animation. Warum?

Edit: Ich bin das neueste Chrome, ich habe noch anderen Browser nicht aktiviert.

Edit: Ich habe versucht, beiden Anrufe in dem gleichen setTimeout Rückruf setzen - keine Animation. Es geht also eindeutig um Trennung.

Edit: hier ist der jsFiddle: http://jsfiddle.net/WfAVj/

Answer 1

Sie können einen Übergang machen, wenn Sie display Eigenschaft zur gleichen Zeit ändern. Damit es funktioniert, musst du dein Element auf andere Weise verstecken. Zum Beispiel:

.hide { 
    height: 0; 
    width: 0; 
    /* overflow: hidden; padding: 0; border: none; */ 
} 

http://jsfiddle.net/dfsq/WfAVj/1/

Answer 2

nur die "transperent" Klasse produzieren Animation .. "verstecken" ist Instant. So starten Sie die Animation und, wenn nötig "verstecken" nach 1 Sekunde:

test.addClass("transparent"); 
//hide after 1 sec, when the animation is done 
setTimeout(function() {test.addClass("hide"); }, 1000); //1000ms = 1sec 

http://jsfiddle.net/WfAVj/4/

Answer 3

Es gibt keine vernünftige "curve" für den Transit von einem display Status zu einem anderen, so in der aktuellen Implementierung von Browsern, jeder Übergang das irgendwie beinhaltet display wird am Ende ohne Übergang überhaupt enden.

Mit diesem Code:

pr_container.removeClass("hide"); 
pr_container.removeClass("transparent"); 

können Sie sich vorstellen, die beiden Anweisungen in einer einzigen „Sperrung“ Warteschlange auszuführen, so praktisch Browser das Element class="hide transparent"-class="" macht, und wie oben erwähnt, die hide Klasse praktisch macht einen bestehenden Übergang ungültig.

von

pr_container.removeClass("hide"); 
setTimeout(function() { pr_container.removeClass("transparent"); }, 0); 

Sie verwenden gesagt Browser die „transparent“ Klasse entfernen „so bald wie möglich, aber nicht in der gleichen Warteschlange“, so Browser entfernt zuerst „verstecken“, und bewegt sich dann auf. Das Entfernen von "transparent" geschieht, wenn der Browser denkt, dass er eine Ressource übrig hat, wodurch der Übergang nicht ungültig wird.

Answer 4

von Vorschlägen in der verknüpften Frage verwenden, habe ich eine Version, die ich mit zufrieden bin:

.test { 
    -webkit-transition: visibility 1s, opacity 1s; 
} 

.hide { 
    visibility: hidden; 
} 

.transparent { 
    opacity: 0; 
} 

http://jsfiddle.net/xKgjS/

Edit: jetzt die beiden Klassen sogar zu einem kombiniert werden können!

Danke an alle!