Esempio
Fare qualcosa con un <div> elemento quando una transizione CSS è terminato:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd",
myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend",
myFunction); Prova tu stesso " Definizione e utilizzo
L'evento transitionend verifica quando una transizione CSS ha completato.
Nota: Se la transizione viene rimosso prima del completamento, ad esempio se il CSS transizione immobili di proprietà viene rimosso, l'evento transitionend non scatta mai.
Per ulteriori informazioni su CSS Transitions, vedere il nostro tutorial su CSS3 Transitions .
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'evento.
Numeri seguiti da "WebKit", "Moz" o "O" specificano la prima versione che ha lavorato con un prefisso.
| Evento | |||||
|---|---|---|---|---|---|
| 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 addEventListener () metodo non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
| bolle: | sì |
|---|---|
| cancelable: | sì |
| Tipo di evento: | TransitionEvent |
| DOM Versione: | Livello 3 Eventi |
Pagine correlate
Tutorial CSS: CSS3 Transitions
CSS Riferimento: CSS3 passaggio di proprietà
CSS Riferimento: CSS3 transizione proprietà immobiliare
oggetto evento