L'évènementtransitionend est émis quand unetransition CSS a terminé. Dans le cas où une transition est supprimée avant d'avoir terminé, comme lorsqu'unetransition-property est supprimée ou lorsquedisplay reçoit la valeurnone, l'évènement n'est pas généré.

L'évènementtransitionend 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ènementtransitioncancel est émis, l'évènementtransitionend 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'interfaceWindow pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la pageHTMLElement: transitionend.

Exemples

Le code suivant ajoute un gestionnaire sur l'évènementtransitionend :

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

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

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

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le gestionnaire d'évènementGlobalEventHandlers.ontransitionend
• L'interfaceTransitionEvent
• Les propriétés CSS :transition,transition-delay,transition-duration,transition-property,transition-timing-function
• Des évènements associés :transitionrun,transitionstart,transitioncancel
• Cet évènement sur les ciblesHTMLElement :transitionend
• Cet évènement sur les ciblesWindow :transitionend