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

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 au lieu de addEventListener() :

document.ontransitionend = () => {
  console.log('Transition terminée');
};

Voir un exemple en direct sur cet évènement.

Spécifications

Spécification Statut Commentaire
CSS Transitions
La définition de 'transitionend' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
transitionend eventChrome Aucun support NonEdge ? Firefox Support complet 51IE ? Opera ? Safari Support complet OuiWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 51Opera Android ? Safari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi