Element : évènement animationcancel
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
L'évènement animationcancel est déclenché lorsqu'une animation CSS est interrompue de manière inattendue. En d'autres termes, chaque fois qu'elle cesse de s'exécuter sans envoyer d'évènement animationend. Cela peut se produire lorsque la propriété animation-name est modifiée de telle sorte que l'animation est supprimée, ou lorsque le nœud animé est masqué à l'aide de CSS. Donc, soit directement, soit parce que l'un de ses nœuds contenant est masqué.
Un gestionnaire d'évènement pour cet évènement peut être ajouté en définissant la propriété onanimationcancel, ou en utilisant addEventListener().
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("animationcancel", (event) => { })
onanimationcancel = (event) => { }
Type d'évènement
Un objet AnimationEvent. Hérite de l'objet Event.
Exemples
Ce code obtient un élément qui est actuellement en cours d'animation et ajoute un écouteur pour l'évènement animationcancel. Il définit ensuite la propriété display de l'élément sur none, ce qui déclenche l'évènement animationcancel.
const anime = document.querySelector(".anime");
anime.addEventListener("animationcancel", () => {
console.log("Animation annulée");
});
anime.style.display = "none";
Identique, mais en utilisant la propriété onanimationcancel à la place de addEventListener() :
const anime = document.querySelector(".anime");
anime.onanimationcancel = () => {
console.log("Animation annulée");
};
anime.style.display = "none";
Exemple interactif
HTML
<div class="exemple-animation">
<div class="conteneur">
<p class="animation">
Vous avez choisi une nuit froide pour venir sur notre planète.
</p>
</div>
<button class="activer" type="button">Activer l'animation</button>
<div class="journal-event"></div>
</div>
CSS
.conteneur {
height: 3rem;
}
.journal-event {
width: 25rem;
height: 2rem;
border: 1px solid black;
margin: 0.2rem;
padding: 0.2rem;
}
.animation.active {
animation-duration: 2s;
animation-name: slide-in;
animation-iteration-count: 2;
}
@keyframes slide-in {
from {
transform: translateX(100%) scaleX(3);
}
to {
transform: translateX(0) scaleX(1);
}
}
JavaScript
const animation = document.querySelector("p.animation");
const journalEventAnimation = document.querySelector(
".exemple-animation>.journal-event",
);
const appliquerAnimation = document.querySelector(
".exemple-animation>button.activer",
);
let compteIteration = 0;
animation.addEventListener("animationstart", () => {
journalEventAnimation.textContent = `${journalEventAnimation.textContent}'début de l'animation' `;
});
animation.addEventListener("animationiteration", () => {
compteIteration++;
journalEventAnimation.textContent = `${journalEventAnimation.textContent}'itération de l'animation : ${compteIteration}' `;
});
animation.addEventListener("animationend", () => {
journalEventAnimation.textContent = `${journalEventAnimation.textContent}'fin de l'animation'`;
animation.classList.remove("active");
appliquerAnimation.textContent = "Activer l'animation";
});
animation.addEventListener("animationcancel", () => {
journalEventAnimation.textContent = `${journalEventAnimation.textContent}'animation annulée'`;
});
appliquerAnimation.addEventListener("click", () => {
animation.classList.toggle("active");
journalEventAnimation.textContent = "";
compteIteration = 0;
const active = animation.classList.contains("active");
appliquerAnimation.textContent = active
? "Annuler l'animation"
: "Activer l'animation";
});
Résultat
Spécifications
| Spécification |
|---|
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel |
Compatibilité des navigateurs
Voir aussi
- Les animations CSS
- Utiliser les animations CSS
- L'interface
AnimationEvent - Évènements associés :
animationstart,animationend,animationiteration