Element: animationcancel Ereignis
Das animationcancel
Ereignis wird ausgelöst, wenn eine CSS-Animation unerwartet abbricht. Mit anderen Worten, jedes Mal, wenn sie aufhört zu laufen, ohne ein animationend
Ereignis zu senden. Dies kann geschehen, wenn der Wert von animation-name
so geändert wird, dass die Animation entfernt wird, oder wenn der animierte Knoten mithilfe von CSS ausgeblendet wird. Dies kann direkt oder dadurch geschehen, dass einer der übergeordneten Knoten ausgeblendet wird.
Ein Ereignishandler für dieses Ereignis kann hinzugefügt werden, indem die onanimationcancel
-Eigenschaft gesetzt oder addEventListener()
verwendet wird.
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
.
Ereigniseigenschaften
Erbt auch Eigenschaften vom übergeordneten Event
.
AnimationEvent.animationName
Nur lesbar-
Ein String, der den Wert von
animation-name
enthält, der die Animation erzeugt hat. AnimationEvent.elapsedTime
Nur lesbar-
Ein
float
, der die Zeitspanne in Sekunden angibt, während der die Animation lief, als dieses Ereignis ausgelöst wurde, ohne die Zeit, in der die Animation pausiert war. Für einanimationstart
Ereignis istelapsedTime
0.0
, es sei denn, es gab einen negativen Wert füranimation-delay
, in diesem Fall wird das Ereignis mitelapsedTime
ausgelöst, das(-1 * Verzögerung)
enthält. AnimationEvent.pseudoElement
Nur lesbar-
Ein String, beginnend mit
'::'
, der den Namen des Pseudoelements enthält, auf dem die Animation ausgeführt wird. Wenn die Animation nicht auf einem Pseudoelement, sondern auf dem Element ausgeführt wird, ein leerer String:''
.
Beispiele
Dieser Code holt sich ein Element, das derzeit animiert wird, 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 statt 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
Specification |
---|
CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS-Animationen
- Verwendung von CSS-Animationen
AnimationEvent
- Verwandte Ereignisse:
animationstart
,animationend
,animationiteration