Element: animationcancel event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das animationcancel-Ereignis wird ausgelöst, wenn eine CSS-Animation unerwartet abbricht. Mit anderen Worten, immer wenn sie aufhört zu laufen, ohne ein animationend-Ereignis zu senden. Dies kann passieren, wenn der Wert von animation-name geändert wird, sodass die Animation entfernt wird, oder wenn der animierende Knoten über CSS verborgen wird. Entweder direkt oder weil einer seiner enthaltenen Knoten verborgen ist.

Ein Ereignis-Handler 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 Ereignis-Handler-Eigenschaft.

addEventListener("animationcancel", (event) => { })

onanimationcancel = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Eltern-Event.

AnimationEvent.animationName Schreibgeschützt: Ein String, der den Wert von animation-name enthält, der die Animation generiert hat.
AnimationEvent.elapsedTime Schreibgeschützt: Ein float, der die Laufzeit der Animation in Sekunden angibt, wenn dieses Ereignis ausgelöst wird, ohne die Pausenzeiten zu berücksichtigen. Bei einem animationstart-Ereignis ist elapsedTime 0.0, es sei denn, es gab einen negativen Wert für animation-delay, in diesem Fall wird das Ereignis mit elapsedTime, das (-1 * Verzögerung) enthält, ausgelöst.
AnimationEvent.pseudoElement Schreibgeschützt: Ein String, beginnend mit '::', der den Namen des Pseudoelements enthält, auf dem die Animation läuft. Wenn die Animation nicht auf einem Pseudoelement, sondern auf dem Element läuft, ein leerer String: ''.

Beispiele

Dieser Code holt ein Element, das derzeit animiert wird, und fügt einen Listener für das animationcancel-Ereignis hinzu. Es setzt dann die display-Eigenschaft des Elements auf none, was das animationcancel-Ereignis auslösen wird.

const animated = document.querySelector(".animated");

animated.addEventListener("animationcancel", () => {
  console.log("Animation canceled");
});

animated.style.display = "none";

Dasselbe, aber unter Verwendung der onanimationcancel-Eigenschaft anstelle von addEventListener():

const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
  console.log("Animation canceled");
};

animated.style.display = "none";

Live-Beispiel

HTML

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

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

Siehe auch

CSS-Animationen
CSS-Animationen verwenden
AnimationEvent
Verwandte Ereignisse: animationstart, animationend, animationiteration

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden