Warum werden meine CSS-Übergänge manchmal nicht animiert?

Verstehen von CSS-Reflow-Problemen bei Browserübergängen

Beim Erstellen eines responsiven Bildschiebereglers mithilfe von CSS3-Übergängen entsteht eine häufige Herausforderung, wenn versucht wird, einen auszulösen Animation, wenn CSS-Eigenschaften geändert werden. Trotz der Initialisierung der Übergangseigenschaft ignorieren Browser möglicherweise die Änderungen und führen die gewünschte Animation nicht aus.

Lösung: Reflow zum Auslösen der Animation erzwingen

Die Lösung für dieses Problem liegt in Erzwingen eines Browser-Reflows, der das Layout und die Darstellung der Seite neu berechnet. Dies kann durch Zugriff auf die offsetHeight-Eigenschaft eines Elements erreicht werden. Die folgende JavaScript-Funktion erreicht dies:

function reflow(elt) {
  console.log(elt.offsetHeight);
}

Implementierung:

Um die Lösung zu implementieren, rufen Sie die Funktion reflow() auf, nachdem Sie die CSS-Eigenschaften geändert haben, die die Animation auslösen . Zum Beispiel:

ul.style.transition = 'none 0s linear';
ul.style.left = '-600px';
ul.style.transition = 'all 0.2s ease-out';
reflow(ul); // Forces a reflow
ul.style.left = '0px';

Hinweis:

Eine aktuelle Optimierung beinhaltet das Ersetzen von console.log(elt.offsetHeight) durch void(elt.offsetHeight) als Optimierer Es ist weniger wahrscheinlich, dass er diese Aussage als mögliche Nebenwirkung ignoriert.

Das obige ist der detaillierte Inhalt vonWarum werden meine CSS-Übergänge manchmal nicht animiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!