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 Transition-End-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 „“ festgelegt.

Wenn der neue Stil festgelegt wird, 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.

Wenn daher die Übergangseigenschaft vor dem nächsten Frame-Malen angewendet wird, sind die linken und oberen Werte bereits die gewünschten 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 anderer DOM-Methoden erzwungen werden, 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 veranschaulicht das Problem und seine Problemumgehung:

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"
});

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.