Warum wird mein CSS-Übergang übersprungen und der Rückruf wird nicht ausgelöst?

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

Ihr Problem ist auf eine Eigenart bei CSS-Übergängen und den Browsern zurückzuführen Rendering-Prozess. Zunächst integrieren Sie HTML mit CSS-Positionswerten und legen einen Übergang für die linken und oberen Eigenschaften fest. Beim Hinzufügen neuer Standortwerte haben Sie einen Übergang erwartet, der jedoch übersprungen wurde, ohne einen Rückruf auszulösen.

Interessanterweise löste das Hinzufügen eines setTimeout von 1 ms zum Umschließen der Stiländerung den Übergang aus. Manchmal blieb der Rückruf jedoch unbeantwortet. Dieses Verhalten kann auf das Timing des Browsers zurückgeführt werden.

Erklärung:

Wenn der neue Stil festgelegt ist, muss der Browser den Inline-Stil noch auf den berechneten Stil anwenden . Der berechnete Stil des Elements bleibt für die Eigenschaften links und oben nicht festgelegt und ist standardmäßig auf 0 Pixel eingestellt. Jeder später angewendete Übergang stimmt einfach mit den eingestellten Werten überein, sodass kein Übergang erfolgt.

Um dieses Problem zu beheben, muss ein Reflow erzwungen werden, um die Stile zu aktualisieren. Dies kann mit dem OffsetHeight-Getter oder anderen ähnlichen Methoden erfolgen, die Reflows auslösen.

Beispiel für die Verwendung von offsetHeight:

<code class="javascript">let tablehtml = `
<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>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

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

Das obige ist der detaillierte Inhalt vonWarum wird mein CSS-Übergang übersprungen und der Rückruf wird nicht ausgelöst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!