Wie starte ich CSS3-Animationen neu, ohne Elemente zu entfernen?

CSS3-Animationen neu starten: Ein besserer Ansatz als das Entfernen von Elementen

Bei der Arbeit mit CSS3-Animationen kann es vorkommen, dass eine Animation bei Benutzerinteraktion neu gestartet werden muss entstehen. Ein häufiges Szenario ist ein Fortschrittsbalken, der die verbleibende Zeit anzeigt und nach Abschluss einen Reset erfordert. Das Entfernen und erneute Einfügen des animierten Elements kann zwar die Animation neu starten, erfordert jedoch unnötige DOM-Manipulationen.

Alternative Methode mit Reflow

Ein effizienterer Ansatz besteht darin, einen Browser auszulösen Reflow, um Animationsänderungen anzuwenden. Dies kann mit der folgenden JavaScript-Funktion erreicht werden:

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

In diesem Beispiel wählen wir das animierte Element (#animated) aus und setzen seine Animation vorübergehend auf „Keine“. Dadurch wird die Animation angehalten, ohne dass ihr Fortschritt zurückgesetzt wird. Als nächstes erzwingen wir mit offsetHeight einen Reflow, der sicherstellt, dass alle CSS-Stile angewendet werden. Abschließend setzen wir die Animationseigenschaft auf ihren ursprünglichen Wert zurück und lösen so einen Neustart der Animation aus ihrem Anfangszustand aus.

Implementierungsbeispiel

Im folgenden HTML- und CSS-Snippet , wir haben einen Fortschrittsbalken, der über den Bildschirm springt:

<div>

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

Klicken Sie auf die Schaltfläche „Zurücksetzen“. ruft die Funktion „reset_animation()“ auf und startet die Animation ohne merkliche Verzögerung oder DOM-Manipulationsaufwand neu.

Fazit

Die Verwendung von Browser-Reflow zum Anwenden von Animationsänderungen bietet eine effizientere und effizientere Lösung elegante Lösung zum Neustart von CSS3-Animationen. Dadurch entfällt die Notwendigkeit, Elemente zu entfernen und erneut einzufügen, was zu einem reibungsloseren und leistungsfähigeren Benutzererlebnis führt.

Das obige ist der detaillierte Inhalt vonWie starte ich CSS3-Animationen neu, ohne Elemente zu entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!