Warum überspringen CSS-Übergänge manchmal Rückrufe oder lösen keine Rückrufe aus?

CSS-Übergang übersprungen oder Rückruf nicht aufgerufen: Die Ursache verstehen

In CSS bieten Übergänge eine elegante Möglichkeit, Eigenschaftsänderungen im Laufe der Zeit reibungslos zu animieren. Es kann jedoch vorkommen, dass Übergänge nicht ausgeführt werden oder die zugehörigen Rückrufe nicht aufgerufen werden.

Ein solches Szenario tritt auf, wenn einem Projektilelement während der Spielentwicklung neue Standortwerte zugewiesen werden. Obwohl jQuery-Aufrufe durch reines JS ersetzt wurden, schien der Übergang vollständig übersprungen zu werden und es wurde kein Rückruf ausgelöst.

Das Geheimnis des fehlenden Übergangs

Seltsamerweise, Abschluss Die Änderung der CSS-Position innerhalb eines setTimeout von 1 ms hat das Problem irgendwie behoben, obwohl der Übergang gelegentlich immer noch umgangen wurde. Diese Inkonsistenz warf die Frage auf: Warum hat setTimeout geholfen und warum ist der Rückruf manchmal fehlgeschlagen?

Die Rolle berechneter Stile

Der Schlüssel zum Verständnis dieses Verhaltens liegt darin in CSS-berechneten Stilen. Wenn Sie neue Stile über JavaScript festlegen, wendet der Browser diese möglicherweise nicht sofort an. Stattdessen bleibt der berechnete Stil des Elements unverändert, was zu einer Diskrepanz zwischen den Inline-Stilen und den berechneten Werten führt.

Im Fall des Projektilelements wurden die berechneten Werte für den linken und oberen Rand angegeben, obwohl der Inline-Stil angegeben wurde Der Stil behielt zunächst die Standardwerte von 0px bei.

Auswirkungen auf Übergänge

Übergänge basieren auf berechneten Stilen, um den Start- und Endstatus der Animation zu bestimmen. Wenn sich der ursprünglich berechnete Stil von dem Inline-Stil unterscheidet, von dem Sie wechseln möchten, hat der Übergang im Wesentlichen keine Auswirkung und scheint zu überspringen.

Die Lösung: Erzwingen eines Reflows

Um dieses Problem zu beheben und sicherzustellen, dass Übergänge immer korrekt ausgeführt werden, muss der Browser gezwungen werden, einen Reflow durchzuführen, der die berechneten Werte neu berechnet Stile.

Eine Möglichkeit, dies zu erreichen, besteht darin, auf eine Eigenschaft zuzugreifen, die aktuelle Stile erfordert, wie z. B. offsetHeight. Im bereitgestellten Code löst animdiv.offsetHeight den Reflow aus, bevor die neuen linken und oberen Werte zugewiesen werden.

Fazit

Wenn Sie das Problem mit berechneten Stilen verstehen, können Sie dies tun Stellen Sie sicher, dass CSS-Übergänge wie erwartet funktionieren und dass Rückrufe zuverlässig aufgerufen werden. Denken Sie daran, vor dem Übergang von Elementen einen Reflow zu erzwingen, wenn Sie unregelmäßiges Verhalten beobachten.

Das obige ist der detaillierte Inhalt vonWarum überspringen CSS-Übergänge manchmal Rückrufe oder lösen keine Rückrufe aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!