Wie starte ich eine CSS3-Animation effektiv neu?

CSS3-Animation effektiv wiederherstellen

Das Neustarten einer CSS3-Animation kann eine herausfordernde Aufgabe sein. Diese Frage untersucht eine Situation, in der ein Balken mithilfe der Transformation „scaleY(0)“ animiert wird, um die verbleibende Zeit darzustellen, und die Notwendigkeit besteht, die Animation auf „scaleY(1)“ zurückzusetzen, bevor sie auf „scaleY(0)“ fortgesetzt wird.

Während sich der anfängliche Versuch, die Animation durch Festlegen von „scaleY(1)“ zurückzusetzen, als wirkungslos erwies, stellt die Frage eine interessante Lösung dar, bei der ein Klon des animierten Elements entfernt und erneut eingefügt wird, um die Animation neu zu starten. Diese Methode ist jedoch möglicherweise nicht die effizienteste oder unkomplizierteste Vorgehensweise.

Anstatt sich auf das Entfernen und Wiedereinsetzen von Elementen zu verlassen, ist die Verwendung der Reflow-Technik eine praktischere Lösung. Bei dieser Technik wird der Animationsstil vorübergehend entfernt, ein Reflow ausgelöst, um die Änderung anzuwenden, und dann der Animationsstil zurückgesetzt. Durch die Einbindung der folgenden JavaScript-Funktion in den Code:

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

durch anschließendes Auslösen dieser Funktion bei einem Ereignis (z. B. einem Klick auf eine Schaltfläche) kann die Animation effektiv zurückgesetzt werden. Dieser Ansatz bietet eine einfache und effiziente Methode zum Neustarten von CSS3-Animationen.

Das obige ist der detaillierte Inhalt vonWie starte ich eine CSS3-Animation effektiv neu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!