Wie kann ich Callback-Funktionen mit CSS3-Animationen auslösen?

Einsatz von Callbacks für CSS3-Animationen

Im Bereich der Webentwicklung stellt sich die Frage: Können CSS3-Animationen Callback-Funktionen auslösen? Während JavaScript-Animationen diese Funktionalität bieten, fehlt bei CSS3-Gegenstücken eine solche inhärente Unterstützung.

Um diese Einschränkung zu umgehen, können CSS3-Animationen mit Ereignis-Listenern gekoppelt werden, wobei die Tatsache ausgenutzt wird, dass Animationen im Wesentlichen selbst Ereignisse sind. Mithilfe von jQuery oder reinem JavaScript können Entwickler diese Ereignisse abonnieren und nach deren Abschluss bestimmte Rückrufe aufrufen:

jQuery:

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

Reines JavaScript:

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

Diese Ereignis-Listener können an jedes animierte HTML-Element angehängt werden. Wenn die Animation ihren Endpunkt erreicht, wird die angegebene Rückruffunktion ausgeführt:

Hinweis: Verschiedene Browser können unterschiedliche Präfixe für die Namen der Ereignis-Listener anzeigen. Die bereitgestellten Beispiele decken die gängigen Präfixe ab und gewährleisten so die Kompatibilität mit allen gängigen Browsern.

Eine Live-Demonstration finden Sie unter:

http://jsfiddle.net/W3y7h/

Das obige ist der detaillierte Inhalt vonWie kann ich Callback-Funktionen mit CSS3-Animationen auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!