Element: animationcancel Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Das animationcancel Ereignis wird ausgelöst, wenn eine CSS-Animation unerwartet abbricht. Mit anderen Worten, jedes Mal, wenn sie ohne das Senden eines animationend Ereignisses stoppt. Dies kann passieren, wenn das animation-name geändert wird, sodass die Animation entfernt wird, oder wenn der animierte Knoten mithilfe von CSS verborgen wird. Dies kann direkt geschehen oder weil einer der enthaltenen Knoten verborgen ist.
Ein Ereignishandler für dieses Ereignis kann durch Setzen der onanimationcancel Eigenschaft hinzugefügt werden oder durch die Verwendung von addEventListener().
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("animationcancel", (event) => { })
onanimationcancel = (event) => { }
Ereignistyp
Ein AnimationEvent. Erbt von Event.
Beispiele
Dieser Code holt ein Element, das derzeit animiert ist, und fügt einen Listener für das animationcancel Ereignis hinzu. Anschließend wird die display Eigenschaft des Elements auf none gesetzt, was das animationcancel Ereignis auslöst.
const animated = document.querySelector(".animated");
animated.addEventListener("animationcancel", () => {
console.log("Animation canceled");
});
animated.style.display = "none";
Dasselbe, aber mit der onanimationcancel Eigenschaft anstelle von addEventListener():
const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
console.log("Animation canceled");
};
animated.style.display = "none";
Live-Beispiel
HTML
<div class="animation-example">
<div class="container">
<p class="animation">You chose a cold night to visit our planet.</p>
</div>
<button class="activate" type="button">Activate animation</button>
<div class="event-log"></div>
</div>
CSS
.container {
height: 3rem;
}
.event-log {
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 animationEventLog = document.querySelector(
".animation-example>.event-log",
);
const applyAnimation = document.querySelector(
".animation-example>button.activate",
);
let iterationCount = 0;
animation.addEventListener("animationstart", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
});
animation.addEventListener("animationiteration", () => {
iterationCount++;
animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});
animation.addEventListener("animationend", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
animation.classList.remove("active");
applyAnimation.textContent = "Activate animation";
});
animation.addEventListener("animationcancel", () => {
animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});
applyAnimation.addEventListener("click", () => {
animation.classList.toggle("active");
animationEventLog.textContent = "";
iterationCount = 0;
const active = animation.classList.contains("active");
applyAnimation.textContent = active
? "Cancel animation"
: "Activate animation";
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel |
Browser-Kompatibilität
Siehe auch
- CSS-Animationen
- Verwendung von CSS-Animationen
AnimationEvent- Verwandte Ereignisse:
animationstart,animationend,animationiteration