Zdarzenie animationend
Definicja i użycie
Kiedy animacja CSS się skończy, występuje zdarzenie animationend.
Aby uzyskać więcej informacji na temat animacji CSS, zapoznaj się z naszym Podręcznik animacji CSS3.
Kiedy animacja CSS jest odtwarzana, mogą wystąpić trzy zdarzenia:
- animationstart - Kiedy animacja CSS się zaczyna
- animationiteration - Kiedy animacja CSS się powtarza
- animationend - Kiedy animacja CSS się skończy
Przykład
Kiedy animacja CSS się skończy, zrób coś z elementem <div>:
var x = document.getElementById("myDIV"); // kod dla Chrome, Safari oraz Opery x.addEventListener("webkitAnimationEnd", myEndFunction); // standardowa składnia x.addEventListener("animationend", myEndFunction);
Składnia
obiekt.addEventListener("webkitAnimationEnd", myScript); // kod dla Chrome, Safari oraz Opery obiekt.addEventListener("animationend", myScript); // standardowa składnia
Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują Metoda addEventListener().
Szczegóły techniczne
Bąbelkowanie: | Obsługiwane |
---|---|
Można anulować: | Nieobsługiwane |
Typ zdarzenia: | Zdarzenie AnimationEvent |
Wersja DOM: | Poziom 3 Zdarzenia |
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje to zdarzenie.
Liczby po 'webkit' lub 'moz' wskazują na pierwszą wersję, używaną jako prefiks.
zdarzenie | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Komentarz:Dla Chrome, Safari oraz Opery, użyj webkitAnimationEnd.
powiązane strony
CSS podręcznik:Animacje CSS3
Przeglądarka CSS referencyjna:Atrybut animation CSS3
Przeglądarka HTML DOM referencyjna:Atrybut animation stylu