Wie kann ich Rückruffunktionen auslösen, nachdem CSS3-Animationen abgeschlossen sind?

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

Im Gegensatz zu JavaScript-Animationen bieten CSS3-Animationen nicht von Natur aus einen direkten Mechanismus zum Ausführen einer Rückruffunktion Fertigstellung. Es gibt jedoch eine Lösung, bei der Ereignis-Listener verwendet werden.

Implementierung mithilfe von JavaScript-Frameworks

Mit jQuery können Sie beispielsweise einen Ereignis-Listener anhängen, um den Abschluss zu erfassen Ereignis und rufen Sie eine Rückruffunktion auf:

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

Implementierung mit Pure JavaScript

Wenn Sie lieber mit reinem JavaScript arbeiten möchten, zeigt das folgende Code-Snippet, wie Sie Ereignis-Listener für verschiedene Animationsendereignisse hinzufügen:

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

Überlegungen

Beachten Sie, dass die Browserunterstützung für CSS3-Animationsereignisse unterschiedlich ist. Die in den Codeausschnitten oben verwendeten Ereignisnamen decken eine Vielzahl von Browsern ab und gewährleisten so die Kompatibilität.

Demo

Eine Live-Demonstration finden Sie in dieser JSFiddle: http:/ /jsfiddle.net/W3y7h/

Das obige ist der detaillierte Inhalt vonWie kann ich Rückruffunktionen auslösen, nachdem CSS3-Animationen abgeschlossen sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!