Können CSS3-Animationen Rückrufe auslösen?

Können CSS3-Animationen Rückrufe auslösen?

Im Gegensatz zu JavaScript-Animationen, die Rückrufe problemlos unterstützen, fehlte CSS3-Animationen zunächst diese Funktionalität. Durch die Verwendung von Ereignis-Listenern ist es jetzt jedoch möglich, Rückrufe für CSS3-Animationen zu implementieren.

Ereignisbasierte Rückrufimplementierung

Der Schlüssel zum Erreichen von Rückrufen in CSS3 besteht darin, Animationen als abhörbare Ereignisse zu erkennen. Durch das Hinzufügen von Ereignis-Listenern zu den relevanten DOM-Elementen können Sie Rückrufe ausführen, wenn die Animation abgeschlossen ist.

jQuery-Ereignisbindungen

Mit jQuery können Sie einen Ereignis-Listener an binden das animierte Element wie folgt:

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

Dies bindet den Ereignis-Listener an drei mögliche Ereignistypen: oanimationend, animationend und webkitAnimationEnd. Dem anfänglichen Ereignis wird ein Herstellerpräfix vorangestellt, um die Kompatibilität mit verschiedenen Browsern sicherzustellen.

Reine JavaScript-Ereignisbindung

Wenn Sie jQuery lieber nicht verwenden möchten, können Sie dafür reines JavaScript verwenden Ereignis-Listener hinzufügen:

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

Dieser Ansatz erzielt das gleiche Ergebnis, jedoch mit nativem JavaScript Code.

Demo und Browserkompatibilität

Eine Live-Demonstration dieser Callback-Implementierung ist unter http://jsfiddle.net/W3y7h/ verfügbar. Beachten Sie, dass die meisten modernen Browser diese Ereignistypen zwar unterstützen, es jedoch immer ratsam ist, bei der Implementierung von Rückrufen die browserübergreifende Kompatibilität zu prüfen.

Das obige ist der detaillierte Inhalt vonKönnen CSS3-Animationen Rückrufe auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!