Warum funktioniert mein CSS-Übergang nicht mit Inline-Stilen und wie kann ich das Problem beheben?

CSS-Übergang startet nicht oder Rückruf wird nicht aufgerufen

Problem:

In einem JavaScript-basierten Spielprojekt erwiesen sich Versuche, jQuery-Animationen durch CSS-Übergänge für Projektilbewegungen zu ersetzen, als erfolglos. Die Übergänge wurden übersprungen oder haben den Rückruf nicht ausgelöst, selbst wenn eine setTimeout-Verzögerung angewendet wurde.

Erklärung:

Dieses Verhalten tritt auf, weil der Browser nicht angewendet wurde Inline-CSS-Stile, bevor Übergangseigenschaften angewendet werden. Wenn der neue Stil festgelegt ist, verfügt der berechnete Stil des Elements weiterhin über Standardwerte für die Anzeige-, linke und obere Position.

Da die linken und oberen Werte bei 0 Pixel (ihren Standardwerten) bleiben, hat der Übergang nichts zu tun da die Werte mit denen des neuen Stils übereinstimmen. Um dies zu beheben, muss ein Browser-Reflow erzwungen werden, um die Stile zu aktualisieren, bevor der Übergang angewendet wird.

Lösung:

Um einen Browser-Reflow zu erzwingen, verwenden Sie Element.offsetHeight Getter. Beispiel:

<code class="js">// Assume animdiv is the element you want the transition to work on
animdiv.offsetTop;
// Now animdiv has all inline styles set

Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});</code>

Dieser Schritt stellt sicher, dass der berechnete Stil des Elements aktuell ist und der Übergang wie erwartet angewendet wird.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein CSS-Übergang nicht mit Inline-Stilen und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!