Element : évènement transitionstart
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 transitionstart est déclenché lorsqu'une transition CSS a réellement commencé, c'est-à-dire après que tout transition-delay soit écoulé.
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("transitionstart", (event) => { })
ontransitionstart = (event) => { }
Type d'évènement
Un objet TransitionEvent. Hérite de Event.
Exemples
Ce code ajoute un écouteur pour l'évènement transitionstart :
element.addEventListener("transitionstart", () => {
console.log("La transition a commencé");
});
Le même exemple, mais en utilisant la propriété ontransitionstart au lieu de addEventListener() :
element.ontransitionstart = () => {
console.log("La transition a commencé");
};
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 transition = document.querySelector(".transition");
const message = document.querySelector(".message");
transition.addEventListener("transitionrun", () => {
message.textContent = "transitionrun déclenché";
});
transition.addEventListener("transitionstart", () => {
message.textContent = "transitionstart déclenché";
});
transition.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).
Spécifications
| Spécification |
|---|
| CSS Transitions Module Level 1 # transitionstart |
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,transitionrun,transitioncancel