Wie kann ich Rückrufe beim Abschluss der CSS3-Animation auslösen?

Rückrufe für CSS3-Animationen

CSS3-Animationen bieten beeindruckende Animationseffekte, es fehlt ihnen jedoch die Flexibilität, nach Abschluss Rückrufe zu implementieren. In diesem Artikel wird eine Lösung hierfür durch die Nutzung von Ereignis-Listenern untersucht.

Problem:

Wie können wir eine Rückruffunktion auslösen, wenn eine CSS3-Animation beendet ist? Während JavaScript-Animationen Rückrufe unterstützen, scheinen CSS3-Animationen über ähnliche Funktionen zu verfügen.

Lösung:

Obwohl CSS3-Animationen keine direkten Rückrufmechanismen bereitstellen, geben sie Ereignisse aus, die dies können mithilfe von Ereignis-Listenern erfasst. Dadurch können wir Rückrufe ausführen, wenn diese Ereignisse auftreten. Hier sind zwei Methoden:

1. Mit jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

2. Mit reinem JavaScript:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Diese Ereignis-Listener erkennen den Abschluss der Animation und lösen die angegebene Rückruffunktion aus. Dadurch wird sichergestellt, dass der Rückruf nach Abschluss der Animation zuverlässig ausgeführt wird.

Live-Demo:

Eine praktische Demonstration finden Sie in der Live-Fiddle unter http://jsfiddle. net/W3y7h/, um die Rückruffunktion in Aktion zu erleben.

Das obige ist der detaillierte Inhalt vonWie kann ich Rückrufe beim Abschluss der CSS3-Animation auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!