Heim  >  Artikel  >  Web-Frontend  >  Warum startet oder löst mein CSS-Übergang die Callback-Funktion nicht aus und wie kann ich das Problem mit einem setTimeout beheben?

Warum startet oder löst mein CSS-Übergang die Callback-Funktion nicht aus und wie kann ich das Problem mit einem setTimeout beheben?

Susan Sarandon
Susan SarandonOriginal
2024-10-31 21:00:02715Durchsuche

Why does my CSS transition not start or trigger the callback function, and how can I fix it using a setTimeout?

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

Problemübersicht

Die Position eines HTML-Elements wird mithilfe von CSS-Übergängen aktualisiert. Der Übergang wird jedoch nicht ausgelöst oder die Rückruffunktion wird nicht aufgerufen, obwohl ein Transitionend-Ereignis-Listener hinzugefügt wurde. Dieses Problem kann gelöst werden, indem die Änderung mit einem setTimeout(1ms) umschlossen wird.

Lösungserklärung

Der Grund für dieses Verhalten liegt im Renderprozess des Browsers. Bevor der Browser den CSS-Übergang anwenden kann, muss er zunächst die Inline-Stile auf das Element anwenden. Wenn sich das Element noch nicht im DOM befindet, wird seine berechnete Stilanzeige auf „“ gesetzt.

Wenn der neue Stil festgelegt ist, hat der Browser den Inline-Stil noch nicht angewendet. Daher bleibt der berechnete Stil des Elements „“, wobei seine linken und oberen Werte immer noch 0 Pixel betragen.

Folglich sind die linken und oberen Werte bereits die gewünschten, wenn die Übergangseigenschaft vor dem nächsten Frame-Malen angewendet wird Dies führt dazu, dass kein Übergang ausgeführt werden muss und das Transitionend-Ereignis nicht ausgelöst wird.

Um dieses Problem zu beheben, kann ein Reflow mithilfe des Element.offsetHeight-Getters oder eines anderen erzwungen werden DOM-Methoden, die aktuelle Stile erfordern. Dadurch wird der Browser gezwungen, die Stile zu aktualisieren, bevor der Übergang angewendet wird, wodurch eine reibungslose Implementierung sichergestellt wird.

Beispiel

Der folgende Code demonstriert das Problem und seine Problemumgehung:

<code class="html"><div id="spanky"
  style="position: absolute;
    left: 10px;
    top: 10px;
    background-color: blue;
    width: 20px;
    height: 20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div></code>
<code class="js">document.body.innerHTML += tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

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

In diesem Beispiel wird der offsetTop-Getter des Animdiv-Elements verwendet, um einen Reflow zu erzwingen, bevor seine Position aktualisiert wird. Dadurch wird sichergestellt, dass der CSS-Übergang ordnungsgemäß ausgelöst und die Rückruffunktion aufgerufen wird.

Das obige ist der detaillierte Inhalt vonWarum startet oder löst mein CSS-Übergang die Callback-Funktion nicht aus und wie kann ich das Problem mit einem setTimeout beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn