Element: animationcancel-Ereignis

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, jedes Mal, wenn sie aufhört zu laufen, ohne ein animationend-Ereignis zu senden. Dies könnte passieren, wenn die animation-name geändert wird, sodass die Animation entfernt wird, oder wenn der animierte Knoten mithilfe von CSS ausgeblendet wird. Entweder direkt oder weil einer seiner umschließenden Knoten ausgeblendet ist.

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 Ereignishandlereigenschaft.

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

onanimationcancel = (event) => { }

Ereignistyp

Ein AnimationEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Elternteil Event.

AnimationEvent.animationName Schreibgeschützt: Ein String, der den Wert der animation-name enthält, die die Animation erzeugt hat.
AnimationEvent.elapsedTime Schreibgeschützt: Ein float, der die Zeitdauer angibt, für die die Animation in Sekunden lief, als dieses Ereignis ausgelöst wurde, ohne die Zeit zu berücksichtigen, in der die Animation angehalten war. 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 * delay) enthält, ausgelöst.
AnimationEvent.pseudoElement Schreibgeschützt: Ein String, der mit '::' beginnt und den Namen des Pseudo-Elements enthält, auf dem die Animation läuft. Wenn die Animation nicht auf einem Pseudo-Element, sondern auf dem Element läuft, ein leerer String: ''.

Beispiele

Dieser Code erhält ein Element, das aktuell animiert wird, und fügt einen Listener für das animationcancel-Ereignis hinzu. Anschließend wird die display-Eigenschaft des Elements auf none gesetzt, wodurch das animationcancel-Ereignis ausgelöst wird.

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

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

animated.style.display = "none";

Das Gleiche, 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

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
Verwendung von CSS-Animationen
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