Événement de fin de transition
Exemple
Faites quelque chose avec un élément <div> lorsqu'une transition CSS est terminée :
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Définition et utilisation
L'événement transitionend se produit lorsqu'une transition CSS est terminée.
Remarque : si la transition est supprimée avant la fin, par exemple si la propriété CSS transition- property est supprimée, l'événement transitionend ne se déclenchera pas.
Pour plus d'informations sur les transitions CSS, consultez notre tutoriel sur les transitions CSS3 .
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'événement.
Les nombres suivis de "webkit", "moz" ou "o" spécifient la première version qui a fonctionné avec un préfixe.
| Event | |||||
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
Syntaxe
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
| Bulles: | Oui |
|---|---|
| Annulable : | Oui |
| Type d'événement: | Événement de transition |
| Version DOM : | Événements de niveau 3 |
Pages connexes
Tutoriel CSS : Transitions CSS3
Référence CSS : Propriété de transition CSS3
Référence CSS : Propriété CSS3 transition-property