Esempio
Fare qualcosa con un <div> elemento quando un'animazione CSS è terminato:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); Prova tu stesso " Definizione e l'utilizzo
L'evento si verifica quando animationend un'animazione CSS è stata completata.
Per ulteriori informazioni su CSS Animations, vedere il nostro tutorial su CSS3 animazioni .
Quando un'animazione CSS gioca, ci sono tre eventi che si possono verificare:
- animationstart - si verifica quando l'animazione CSS è iniziata
- animationiteration - si verifica quando l'animazione CSS si ripete
- animationend - si verifica quando l'animazione CSS ha completato
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'evento.
Numeri seguiti da "webkit" o "moz" specificano la prima versione che ha lavorato con un prefisso.
| Evento | |||||
|---|---|---|---|---|---|
| animationend | 4.0 webkit | 10.0 | 16,0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1 |
Nota: per Chrome, Safari e Opera, utilizzare il prefisso webkitAnimationEnd.
Sintassi
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript );
// Standard syntax
Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
| bolle: | sì |
|---|---|
| cancelable: | No |
| Tipo di evento: | AnimationEvent |
| DOM Versione: | Livello 3 Eventi |
Pagine correlate
Tutorial CSS: CSS3 animazioni
CSS Riferimento: CSS3 animation Property
HTML DOM di riferimento: Style animation Property
<Oggetto evento