Document: évènement transitionend

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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 :

js
document.addEventListener("transitionend", () => {
  console.log("Transition terminée");
});

La même chose, mais en utilisant la propriété ontransitionend au lieu de addEventListener() :

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

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

Spécifications

Specification
CSS Transitions
# transitionend

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transitionend event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi