Przejścia CSS nie działają, chyba że używam limitu czasu

Question

Mam kilka klas: hide jest display: none, a transparent jest opacity: 0. Element pr_container ma wartość pr_container. Poniższy kod JQuery oparte sprawia element pojawia się w animowanym fasion:

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

Jednak, kiedy usunąć setTimeout i zamiast po prostu usunąć drugą klasę, nie ma animacji. Czemu?

Edytuj: Używam najnowszego Chrome, jeszcze nie sprawdziłem innych przeglądarek.

Edytuj: Próbowałem umieszczać oba wywołania w tym samym wywołaniu zwrotnym setTimeout - bez animacji. Więc wyraźnie chodzi o separację.

Edit: oto jsFiddle: http://jsfiddle.net/WfAVj/

Answer 1

Nie można dokonać przejścia jeśli zmieniają display własności w tym samym czasie. Aby to zadziałało, musisz ukryć swój żywioł w inny sposób. Na przykład:

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

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

Answer 2

tylko "transperent" animacja klasa produktów .. "hide" jest natychmiastowy. Więc uruchomić animację, a jeśli potrzebna „hide” po 1 sekundzie:

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

nie ma rozsądne „curve” tranzyt z jednego display stanu do drugiego, więc w obecnej implementacji przeglądarek, każdy przejściowym w jakiś sposób wiąże się z tym, że display zakończy się bez żadnego przejścia.

Z tym kodem:

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

można sobie wyobrazić dwie instrukcje są wykonywane w jednym „blokowanie” kolejce, tak przeglądarek praktycznie czyni element z class="hide transparent" do class="", jak stwierdzono powyżej, klasa hide praktycznie unieważnia wszelkie istniejące przejścia.

Korzystając

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

Mówiłeś przeglądarek, aby usunąć „przezroczysty” klasę „tak szybko, jak to możliwe, ale nie w tej samej kolejce”, więc przeglądarka najpierw usuwa „Hide”, a następnie przemieszcza się dalej. Usunięcie "przezroczystego" dzieje się wtedy, gdy przeglądarka myśli, że ma wolne zasoby, dlatego przejście nie zostaje unieważnione.

Answer 4

Korzystając z sugestii w połączonej pytanie, zrobiłem wersję, że jestem zadowolony z:

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

.hide { 
    visibility: hidden; 
} 

.transparent { 
    opacity: 0; 
} 

http://jsfiddle.net/xKgjS/

Edit: teraz dwie klasy mogą być nawet w połączeniu z jednym!

Dziękuję wszystkim!