Das Ändern von css mit jQuery 2.1+ ignoriert die Übergangseigenschaft

Question

Das Ändern von css mit jQuery 2.1+ ignoriert die Übergangseigenschaft

9

Ich wechsle von jQuery 2.0.3 zu 2.1.0.

Ich habe festgestellt, dass in v2.1.0 die Eigenschaft css transition ignoriert wird, wenn man css-Eigenschaften direkt einstellt

$('#someElement').css('width','100px');

In v2.0.3 behält mein Element den css -Übergang bei, während ich das in v2.1.0 verliere.

Ich frage mich, warum das anders gehandhabt wird und wie ich den Übergangseffekt "anstellen" kann.

Bei jQuery 2.0.3 tritt die Eigenschaft css transition in Kraft

%Vor% %Vor% %Vor%

Bei jQuery 2.1.0 wird die Eigenschaft css transition ignoriert

%Vor% %Vor% %Vor%

Bearbeiten:

Ich sehe dieses seltsame Verhalten in Chrome Version 47.0.2526.106 m

In Firefox 42.0 animieren beide richtig

javascript jquery css3 css-transitions jquery-2.0

Eric Phillips 18.12.2015, 03:29

quelle

2 Antworten

1

scheint auch zu funktionieren mit animate () anstelle von css ()

%Vor% %Vor% %Vor%

lucas 18.12.2015 04:09

quelle

Tags und Links javascript jquery css3 css-transitions jquery-2.0

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Kann ich die Ausgabefarbe einer benutzerdefinierten Android-Tastatur ändern?

score 3 · Accepted Answer

Nachdem ich mich umgeschaut habe, denke ich, dass dies mit den Änderungen zusammenhängen könnte, die für das # 14164 während der v2.1.0 release . Wie im Titel angegeben, "Erzwungenes Layout-Reflow in init oder Methoden reduzieren" .

Ich habe den v2.0.3-Quellcode mit v2.1.0 Quellcode , und es sieht so aus, als ob ein Refactoring um die Methode .ready() durchgeführt wurde und wie die Ereignisse zurückgestellt wurden. Genauer gesagt denke ich, dass es mit der Zeile 3407-3408 in Version 2.1.0 zusammenhängen könnte, wo die Methode .ready() anfänglich aufgerufen wird (das war nicht in Version 2.0.3 vorhanden):

%Vor%

Wie bei einer Problemumgehung scheint dieses Übergangsverhalten in allen Browsern inkonsistent zu sein. Um das Problem in Chrome zu beheben, können Sie die Ausführung des Codes verzögern und ein Neuzeichnen erzwingen.

%Vor% %Vor% %Vor%

Alternativ können Sie jQuery nach auch die DOM-Elemente laden, indem Sie das Skript an den unteren Rand Ihrer Seite verschieben. Es ist immer noch verblüffend, warum dies in Chrome einen Unterschied macht, in Firefox jedoch keine Rolle spielt. Es muss damit zusammenhängen, wie das DOM nach Ereignissen gezeichnet / gemalt wird.

%Vor% %Vor% %Vor%