animacjakoniec Wydarzenie
Przykład
Zrób coś z elementem <div> po zakończeniu animacji CSS:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definicja i użycie
Zdarzenie animationend występuje po zakończeniu animacji CSS.
Aby uzyskać więcej informacji na temat animacji CSS, zapoznaj się z naszym samouczkiem dotyczącym animacji CSS3 .
Podczas odtwarzania animacji CSS mogą wystąpić trzy zdarzenia:
- Animationstart - występuje, gdy animacja CSS została uruchomiona
- Animationiteration - występuje, gdy animacja CSS jest powtarzana
- Animationend - występuje po zakończeniu animacji CSS
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
Liczby, po których następuje „webkit” lub „moz”, określają pierwszą wersję, która działała z prefiksem.
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Uwaga: w przeglądarkach Chrome, Safari i Opera użyj prefiksu webkitAnimationEnd.
Składnia
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
Bąbelki: | tak |
---|---|
Możliwość anulowania: | Nie |
Typ wydarzenia: | AnimacjaWydarzenie |
Wersja DOM: | Wydarzenia poziomu 3 |
Powiązane strony
Samouczek CSS: animacje CSS3
Dokumentacja CSS: Właściwość animacji CSS3
Odniesienie HTML DOM: Właściwość animacji stylu