Document: évènement transitionend
L'évènement transitionend est émis quand une transition CSS a terminé. Dans le cas où une transition est supprimée avant d'avoir terminé, comme lorsqu'une transition-property est supprimée ou lorsque display reçoit la valeur none, l'évènement n'est pas généré.
| Bouillonne | Oui |
|---|---|
| Est annulable | Oui |
| Interface | TransitionEvent |
| Propriété gestionnaire d'évènement | ontransitionend (en-US) |
L'évènement transitionend est émis dans les deux directions : quand la transition se termine vers l'état modifié, et quand elle est complètement retournée à l'état par défaut ou non modifié. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n'y a pas de transition, et aucun évènement de transition n'est émis. Si l'évènement transitioncancel est émis, l'évènement transitionend ne se produira pas.
La cible originale pour cet évènement est l'Element sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l'interface Window pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page HTMLElement: transitionend.
Exemples
Le code suivant ajoute un gestionnaire sur l'évènement transitionend :
document.addEventListener("transitionend", () => {
console.log("Transition terminée");
});
La même chose, mais en utilisant la propriété ontransitionend (en-US) au lieu de addEventListener() :
document.ontransitionend = () => {
console.log("Transition terminée");
};
Spécifications
| Specification |
|---|
| CSS Transitions # transitionend |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Le gestionnaire d'évènement
GlobalEventHandlers.ontransitionend(en-US) - L'interface
TransitionEvent - Les propriétés CSS :
transition,transition-delay,transition-duration,transition-property,transition-timing-function - Des évènements associés :
transitionrun(en-US),transitionstart(en-US),transitioncancel(en-US) - Cet évènement sur les cibles
HTMLElement:transitionend - Cet évènement sur les cibles
Window:transitionend(en-US)