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

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!