Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Dezember 2019.
Dasanimationiteration-Event wird ausgelöst, wenn eine Iteration einerCSS-Animation endet und eine neue beginnt. Dieses Ereignis tritt nicht gleichzeitig mit demanimationend-Ereignis auf und tritt daher nicht bei Animationen mit einemanimation-iteration-count von eins auf.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder setzen Sie eine Ereignisbehandlungs-Eigenschaft.
addEventListener("animationiteration", (event) => { })onanimationiteration = (event) => { }Ereignistyp
EinAnimationEvent. Erbt vonEvent.
Ereigniseigenschaften
Erbt auch Eigenschaften von seinem ElternteilEvent.
AnimationEvent.animationNameSchreibgeschütztEin String, der den Wert des
animation-nameenthält, das die Animation erzeugt hat.AnimationEvent.elapsedTimeSchreibgeschütztEin
float, der die Zeit angibt, die die Animation beim Auslösen dieses Ereignisses bereits gelaufen ist, in Sekunden, ohne die Zeit zu berücksichtigen, in der die Animation pausiert war. Bei einemanimationstart-Event istelapsedTime0.0, es sei denn, es gab einen negativen Wert füranimation-delay, in welchem Fall das Ereignis mitelapsedTimeund dem Wert(-1 * delay)ausgelöst wird.AnimationEvent.pseudoElementSchreibgeschütztEin String, beginnend mit
'::', der den Namen desPseudoelements enthält, auf dem die Animation läuft. Wenn die Animation nicht auf einem Pseudoelement, sondern auf dem Element läuft, ist der String leer:''.
Beispiele
Dieser Code verwendetanimationiteration, um die Anzahl der Iterationen, die eine Animation abgeschlossen hat, zu verfolgen:
const animated = document.querySelector(".animated");let iterationCount = 0;animated.addEventListener("animationiteration", () => { iterationCount++; console.log(`Animation iteration count: ${iterationCount}`);});Dasselbe, jedoch mit deronanimationiteration-Ereignisbehandlungs-Eigenschaft:
const animated = document.querySelector(".animated");let iterationCount = 0;animated.onanimationiteration = () => { iterationCount++; console.log(`Animation iteration count: ${iterationCount}`);};Live-Beispiel
HTML
<div> <div> <p>You chose a cold night to visit our planet.</p> </div> <button type="button">Activate animation</button> <div></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 |