animatieend evenement
Voorbeeld
Doe iets met een <div>-element wanneer een CSS-animatie is afgelopen:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definitie en gebruik
De gebeurtenis Animationend vindt plaats wanneer een CSS-animatie is voltooid.
Zie onze tutorial over CSS3-animaties voor meer informatie over CSS-animaties .
Wanneer een CSS-animatie wordt afgespeeld, kunnen er drie gebeurtenissen plaatsvinden:
- animatiestart - treedt op wanneer de CSS-animatie is gestart
- animatieiteratie - treedt op wanneer de CSS-animatie wordt herhaald
- animatieend - treedt op wanneer de CSS-animatie is voltooid
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de gebeurtenis volledig ondersteunt.
Getallen gevolgd door "webkit" of "moz" geven de eerste versie aan die met een voorvoegsel werkte.
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Opmerking: gebruik voor Chrome, Safari en Opera het voorvoegsel webkitAnimationEnd.
Syntaxis
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
bubbels: | Ja |
---|---|
Annuleerbaar: | Nee |
Evenementtype: | AnimatieEvenement |
DOM-versie: | Niveau 3 Evenementen |
Gerelateerde pagina's
CSS-zelfstudie: CSS3-animaties
CSS-referentie: CSS3-animatie-eigenschap
HTML DOM-referentie: Stijlanimatie Eigenschap