Element: animationiteration event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Das animationiteration
-Ereignis wird ausgelöst, wenn eine Iteration einer CSS-Animation endet und eine neue beginnt. Dieses Ereignis tritt nicht gleichzeitig mit dem animationend
-Ereignis auf und daher nicht bei Animationen mit einem animation-iteration-count
von eins.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("animationiteration", (event) => {});
onanimationiteration = (event) => {};
Ereignistyp
Ein AnimationEvent
. Erbt von Event
.
Ereigniseigenschaften
Erbt auch Eigenschaften von seinem übergeordneten Event
.
AnimationEvent.animationName
Nur lesbar-
Ein String, der den Wert des
animation-name
enthält, der die Animation erzeugt hat. AnimationEvent.elapsedTime
Nur lesbar-
Ein
float
, der die Zeit in Sekunden angibt, die die Animation lief, als dieses Ereignis ausgelöst wurde, ohne die Zeiten zu berücksichtigen, in denen die Animation angehalten war. Für einanimationstart
-Ereignis istelapsedTime
0.0
, es sei denn, es gab einen negativen Wert füranimation-delay
, in welchem Fall das Ereignis mitelapsedTime
, das(-1 * delay)
enthält, ausgelöst wird. AnimationEvent.pseudoElement
Nur lesbar-
Ein String, beginnend mit
'::'
, der den Namen des Pseudo-Elements enthält, auf dem die Animation ausgeführt wird. Wenn die Animation nicht auf einem Pseudo-Element, sondern auf dem Element ausgeführt wird, ein leerer String:''
.
Beispiele
Dieser Code verwendet animationiteration
, um die Anzahl der abgeschlossenen Iterationen einer Animation zu verfolgen:
const animated = document.querySelector(".animated");
let iterationCount = 0;
animated.addEventListener("animationiteration", () => {
iterationCount++;
console.log(`Animation iteration count: ${iterationCount}`);
});
Dasselbe, aber mit der onanimationiteration
-Ereignishandlereigenschaft:
const animated = document.querySelector(".animated");
let iterationCount = 0;
animated.onanimationiteration = () => {
iterationCount++;
console.log(`Animation iteration count: ${iterationCount}`);
};
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-animationiteration |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS-Animationen
- Verwendung von CSS-Animationen
AnimationEvent
- Verwandte Ereignisse:
animationstart
,animationend
,animationcancel