Element : évènement transitioncancel

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("transitioncancel", (event) => { })

ontransitioncancel = (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 transitioncancel :

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

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

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

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

transition.ontransitioncancel = () => {
  console.log("Transition annulé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"></div>
<div class="message"></div>

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

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

À cela, nous ajoutons du JavaScript pour indiquer que les évènements transitionstart, transitionrun, transitioncancel et transitionend se déclenchent. 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 se déclenche, 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 transitioncancel est déclenché si la transition est annulée dans un sens ou dans l'autre après que l'évènement transitionrun se soit produit et avant que l'évènement transitionend ne soit déclenché.

Si aucune durée ou délai de transition n'est défini, 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 n'est pas déclenché.

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, transitionend