Element : évènement transitionend

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènements.

addEventListener("transitionend", (event) => { })

ontransitionend = (event) => { }

Type d'évènement

Un objet TransitionEvent. Hérite de Event.

Exemples

Ce code récupère un élément qui a une transition définie et ajoute un écouteur pour l'évènement transitionend :

const transition = document.querySelector(".transition");

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

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

const transition = document.querySelector(".transition");

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

Exemple interactif

Dans l'exemple suivant, nous avons un simple élément HTML <div>, stylé avec une transition qui inclut un délai :

<div class="transition">Survolez-moi</div>
<div class="message"></div>

.transition {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: transparent;
}

À cela, nous ajoutons du JavaScript pour indiquer que les évènements transitionstart, transitionrun, transitioncancel et transitionend sont déclenchés. Dans cet exemple, pour annuler la transition, cessez de survoler la boîte en transition avant la fin de la transition. Pour que l'évènement de fin de transition soit déclenché, restez sur la transition jusqu'à la fin de celle-ci.

const message = document.querySelector(".message");
const el = document.querySelector(".transition");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun déclenché";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart déclenché";
});

el.addEventListener("transitioncancel", () => {
  message.textContent = "transitioncancel déclenché";
});

el.addEventListener("transitionend", () => {
  message.textContent = "transitionend déclenché";
});

L'évènement transitionend est déclenché dans les deux sens : lorsque la boîte a fini de tourner et que l'opacité atteint 0 ou 1, selon la direction.

S'il n'y a pas de délai ou de durée de transition, si les deux sont à 0s ou si aucun n'est déclaré, il n'y a pas de transition, et aucun des évènements de transition n'est déclenché.

Si l'évènement transitioncancel est déclenché, l'évènement transitionend ne l'est pas.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'interface TransitionEvent
• Les propriétés CSS transition, transition-delay, transition-duration, transition-property, transition-timing-function
• Évènements associés : transitionrun, transitionstart, transitioncancel