Evento di transizione
Esempio
Fai qualcosa con un elemento <div> quando una transizione CSS è terminata:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Definizione e utilizzo
L'evento transitionend si verifica quando una transizione CSS è stata completata.
Nota: se la transizione viene rimossa prima del completamento, ad esempio se la proprietà della proprietà di transizione CSS viene rimossa, l'evento di transizione non verrà attivato.
Per ulteriori informazioni sulle transizioni CSS, consulta il nostro tutorial sulle transizioni CSS3 .
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'evento.
I numeri seguiti da "webkit", "moz" o "o" specificano la prima versione che ha funzionato con un prefisso.
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
Sintassi
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
Nota: il metodo addEventListener() non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
Bolle: | sì |
---|---|
Annullabile: | sì |
Tipo di evento: | Evento di transizione |
Versione DOM: | Eventi di livello 3 |
Pagine correlate
Esercitazione CSS: Transizioni CSS3
Riferimento CSS: Proprietà di transizione CSS3
Riferimento CSS: proprietà di transizione CSS3