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

BCD tables only load in the browser

Voir aussi