wydarzenie przejściowe
Przykład
Zrób coś z elementem <div> po zakończeniu przejścia CSS:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Definicja i użycie
Zdarzenie transitionend występuje po zakończeniu przejścia CSS.
Uwaga: Jeśli przejście zostanie usunięte przed zakończeniem, np. jeśli właściwość CSS transition-property zostanie usunięta, zdarzenie transitionend nie zostanie uruchomione.
Aby uzyskać więcej informacji o przejściach CSS, zapoznaj się z naszym samouczkiem dotyczącym przejść CSS3 .
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”, „moz” lub „o”, określają pierwszą wersję, która działała z prefiksem.
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
Składnia
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", 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: | tak |
Typ wydarzenia: | Zdarzenie przejścia |
Wersja DOM: | Wydarzenia poziomu 3 |
Powiązane strony
Samouczek CSS: Przejścia CSS3
Dokumentacja CSS: właściwość przejścia CSS3
Dokumentacja CSS: CSS3 transition-property Property