transitieend evenement
Voorbeeld
Doe iets met een <div>-element wanneer een CSS-overgang is beëindigd:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Definitie en gebruik
De gebeurtenis transitionend vindt plaats wanneer een CSS-overgang is voltooid.
Opmerking: als de overgang wordt verwijderd voordat deze is voltooid, bijvoorbeeld als de eigenschap CSS transition-property wordt verwijderd, wordt de gebeurtenis transitionend niet geactiveerd.
Zie onze tutorial over CSS3-overgangen voor meer informatie over CSS-overgangen .
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de gebeurtenis volledig ondersteunt.
Getallen gevolgd door "webkit", "moz" of "o" geven de eerste versie aan die met een voorvoegsel werkte.
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
Syntaxis
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
bubbels: | Ja |
---|---|
Annuleerbaar: | Ja |
Evenementtype: | OvergangEvent |
DOM-versie: | Niveau 3 Evenementen |
Gerelateerde pagina's
CSS-zelfstudie: CSS3-overgangen
CSS-referentie: CSS3-overgangseigenschap
CSS-referentie: eigenschap CSS3-overgangseigenschap