CSS3-Animationen neu starten: Ist Reflow die beste Alternative zum Entfernen von Elementen?

CSS3-Animationen neu starten: Verbesserte Alternative zum Entfernen von Elementen

Beim Bestreben, eine CSS3-Animation neu zu starten, besteht eine häufig verwendete faszinierende Technik darin, das Element zu entfernen animiertes Element aus dem Dokument entfernen und seinen Klon wieder einfügen. Obwohl dieser Ansatz effektiv ist, bietet er eine Möglichkeit zur Optimierung.

Eine bevorzugte Methode zum Erreichen eines Animationsneustarts, wie von einem anonymen Experten vorgeschlagen, besteht darin, einen Reflow auszulösen. Dies kann einfach durch Zugriff auf die Höhe des HTMLElements erreicht werden, wie unten gezeigt:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

In diesem Beispiel ist die Animation zunächst auf „none“ gesetzt, was den Reset auslöst. Anschließend wird ein Reflow initiiert, indem auf die offsetHeight des Elements zugegriffen wird, die die Größe des Elements berechnet und zwischenspeichert, wodurch die Animation zurückgesetzt wird. Schließlich ermöglicht der dem Animationsstil zugewiesene „Null“-Wert die erneute Wiedergabe.

Dieser auf Reflow basierende Ansatz ist sowohl prägnant als auch effizient und übertrifft die vorherige Methode in seiner Einfachheit und Effektivität.

Das obige ist der detaillierte Inhalt vonCSS3-Animationen neu starten: Ist Reflow die beste Alternative zum Entfernen von Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!