esempio JavaScript/jQuery molto semplice: ordine di valutazione imprevisto delle istruzioni

Question

Sono sorpreso dal fatto che una regola di transizione CSS3 applicata tramite jQuery dopo una modifica di proprietà CSS basata su jQuery anima effettivamente questa modifica di proprietà. Dare un'occhiata a http://jsfiddle.net/zwatf/3/:

Inizialmente, un div è disegnato da due classi e ha una certa altezza (200px) a causa delle proprietà CSS predefinite di queste due classi. L'altezza viene quindi modificato con jQuery tramite rimozione di una classe:

$('.container').removeClass('active'); 

Questo riduce l'altezza da 200px per 15px.

Dopo di che, una regola di transizione viene applicata al contenitore mediante aggiunta di una classe:

$('.container').addClass('all-transition'); 

Quello che sta accadendo è che la riduzione dell'altezza si anima (su Firefox e Chrome, almeno). Nel mio mondo, questo non dovrebbe accadere se l'ordine delle istruzioni ha un significato.

Credo che questo comportamento può essere spiegato molto bene. Perché sta succedendo? Come posso impedirlo?

Questo è ciò che voglio raggiungere:

1. modificare lo stile di default con jQuery (non animato da transizione CSS3!)
2. Applica la regola di transizione con jQuery
3. cambiamento di una proprietà con jQuery (animato per transizione CSS3)

(1) e (2) dovrebbero accadere il più rapidamente possibile, quindi non mi piace lavorare con ritardi arbitrari.

Answer 1

Durante l'esecuzione di uno script, il browser di solito rimandano le modifiche del DOM alla fine per evitare il disegno non necessario. È possibile forzare un riflusso dalla lettura/scrittura di alcune proprietà:

var container = $('.container').removeClass('active'); 
var foo = container[0].offsetWidth; //offsetWidth makes the browser recalculate 
container.addClass('all-transition'); 

jsFiddle

oppure è possibile utilizzare setTimeout con una breve durata, che fa sostanzialmente la stessa cosa, lasciando il reflow del browser automaticamente, aggiungendo poi il classe.

Answer 2

penso, succede solo troppo veloce. Se si esegue questa operazione:

$('.container').toggleClass('active',function() { 
    $('.container').addClass('all-transition'); 
}); 

si comporterà come previsto, giusto?

ok, va bene, ho provato, ma non mi rendevo conto che non ha funzionato come previsto. Qui alternativa al lo compongono:

$('.container').removeClass('active').promise().done(function(){ 
    $('.container').addClass('all-transition'); 

    $('.container').css('height','300'); //to see the easing 
}); 

Answer 3

Perché che succede?

Immagino perché il DOM li vede applicati insieme; le azioni consecutive immediate vengono solitamente memorizzate nella cache anziché essere applicate una dopo l'altra.

Come posso impedirlo?

A (molto piccola) timeout dovrebbe farlo: http://jsfiddle.net/zwatf/4/

(dai commenti) innescando manualmente un riflusso aiuta anche: http://jsfiddle.net/zwatf/9/

non mi piace lavorare con i ritardi arbitrari.

Poi penso che l'unico altro modo possibile è quello di rimuovere il height dalle proprietà CSS animati, cioè è necessario dichiarare esplicitamente quali si voleva animare: http://jsfiddle.net/zwatf/5/