Element : évènement transitionrun
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2020.
L'évènement transitionrun est déclenché lorsqu'une transition CSS est créée, c'est-à-dire avant que tout transition-delay n'ait commencé.
Cet évènement n'est pas annulable.
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("transitionrun", (event) => { })
ontransitionrun = (event) => { }
Type d'évènement
Un objet TransitionEvent. Hérite de Event.
Exemples
Ce code ajoute un écouteur pour l'évènement transitionrun :
el.addEventListener("transitionrun", () => {
console.log(
"La transition est en cours mais n'a pas nécessairement commencé à se produire",
);
});
Le même exemple, mais en utilisant la propriété ontransitionrun au lieu de addEventListener() :
el.ontransitionrun = () => {
console.log(
"La transition a commencé à s'exécuter et commence à se produire lorsque le délai de transition est écoulé",
);
};
Exemple interactif
Dans l'exemple suivant, nous avons un simple élément HTML <div>, mis en forme 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 où les évènements transitionstart et transitionrun sont déclenchés.
const el = document.querySelector(".transition");
const message = document.querySelector(".message");
el.addEventListener("transitionrun", () => {
message.textContent = "transitionrun déclenché";
});
el.addEventListener("transitionstart", () => {
message.textContent = "transitionstart déclenché";
});
el.addEventListener("transitionend", () => {
message.textContent = "transitionend déclenché";
});
La différence est la suivante :
transitionrunest déclenché lorsque la transition est créée (c'est-à-dire au début de tout délai).transitionstartest déclenché lorsque l'animation effective a commencé (c'est-à-dire à la fin de tout délai).
L'évènement transitionrun se produit même si la transition est annulée avant l'expiration du délai. S'il n'y a aucun délai de transition ou si le délai de transition est négatif, transitionrun et transitionstart sont tous deux déclenchés.
Spécifications
| Spécification |
|---|
| CSS Transitions Module Level 1 # transitionrun |
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 :
transitionend,transitionstart,transitioncancel