Evento transitionend

Eventi DOM Evento TransitionEvent

Definizione e uso

L'evento transitionend si verifica quando la transizione CSS è completata.

Nota:Se la transizione viene rimossa prima di essere completata, ad esempio se si rimuove CSS transition-property Le proprietà non faranno scattare l'evento transitionend.

Per ulteriori informazioni sulla transizione CSS, studia i nostri Corso CSS3 transizione.

Esempio

Quando il CSS della transizione termina, fai qualcosa per l'elemento <div>:

// codice per Safari 3.1 a 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// sintassi standard
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Prova tu stesso

Sintassi

oggetto.addEventListener("webkitTransitionEnd", myScript);  // codice per Safari 3.1 a 6.0
oggetto.addEventListener("transitionend", myScript);        // sintassi standard

Nota:Internet Explorer 8 e versioni precedenti non supportano Metodo addEventListener().

Dettagli tecnici

Bubble: Supporto
Cancellable: Supporto
Tipo di evento: Evento TransitionEvent
Versione DOM: Level 3 Events

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'evento.

I numeri seguiti da "webkit", "moz" o "o" specificano la versione iniziale di questi prefissi utilizzati.

Evento Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

Pagine correlate

Corso CSS: CSS3 transizione

Manuale di riferimento CSS: attributo CSS3 transition

Manuale di riferimento CSS: Proprietà transition-property CSS3

Eventi DOM Evento TransitionEvent