Gibt es einen Rückruf nach Abschluss einer CSS3-Animation?


91

Gibt es eine Möglichkeit, eine Rückruffunktion bei CSS3-Animationen zu implementieren? Im Falle einer Javascript-Animation ist dies möglich, findet jedoch keine Möglichkeit, dies in CSS3 zu tun.

Eine Möglichkeit, die ich sehen könnte, besteht darin, einen Rückruf nach der Animationsdauer auszuführen, aber das stellt nicht sicher, dass er immer direkt nach dem Ende der Animation aufgerufen wird. Dies hängt von der Warteschlange der Browser-Benutzeroberfläche ab. Ich möchte eine robustere Methode. Irgendeine Ahnung?


Mögliches Duplikat des Rückrufs beim CSS-Übergang
Givanse

Wenn Sie eine einfache CSS-Aktion ausführen möchten, z. B. das Element nach dem Übergang ausblenden möchten, benötigen Sie möglicherweise keinen Rückruf. Stattdessen können Sie Ihr Problem mit dem Keyframe der Animation lösen.
Madmadi

Antworten:


130

Ja da ist. Der Rückruf ist ein Ereignis, daher müssen Sie einen Ereignis-Listener hinzufügen, um ihn abzufangen. Dies ist ein Beispiel mit jQuery:

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

Oder reine js:

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

Live-Demo: http://jsfiddle.net/W3y7h/


3
Für IE10 ist es 'MSAnimationEnd' (siehe msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )
Martin Wittemann

6
Es ist transitionendnicht animationend.

13
@ MichaelJones nein, das ist für CSS3-Übergänge. Die Frage betraf Animationen.
Joshvermaire

4
@MartinWittemann IE10 final verwendet jetzt animationend msdn.microsoft.com/en-us/library/ie/… . @Husky der Code funktioniert in Chrome und FF 14, siehe aktualisierte Geige jsfiddle.net/W3y7h
Methodofaction

1
Duplikat von stackoverflow.com/questions/9255279/…, das eine vollständigere Lösung hat
vanthome

3

Eine einfache Möglichkeit für Sie, einen Rückruf durchzuführen, der auch Ihre CSS3-Übergänge / Browserkompatibilitäten behandelt, ist das jQuery Transit Plugin . Beispiel:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddle Demo


1
Bonuspunkt für die gemeinsame Nutzung der API-Spezifikation mit jQuery animieren, aber dennoch die von der Hardware gerenderte Glätte von CSS-Animationen nutzen. Wir haben gerade jQuery animate an allen Stellen durch dieses ersetzt.
Logan
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.