Animation: remove Ereignis

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 remove-Ereignis der Animation-Schnittstelle wird ausgelöst, wenn die Animation vom Browser automatisch entfernt wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener('remove', (event) => { })
onremove = (event) => { }

Ereignistyp

Ein AnimationPlaybackEvent. Erbt von Event.

Event AnimationPlaybackEvent

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften von der übergeordneten Schnittstelle Event verfügbar.

AnimationPlaybackEvent.currentTime Nur lesbar

Die aktuelle Zeit der Animation, die das Ereignis erzeugt hat.

AnimationPlaybackEvent.timelineTime Nur lesbar

Der Zeitwert der Timeline der Animation, die das Ereignis erzeugt hat.

Beispiele

Entfernen von ersetzten Animationen

In diesem Beispiel haben wir ein <button id="start">-Element und einen Ereignis-Listener, der ausgeführt wird, wann immer die Maus bewegt wird. Der mousemove-Ereignis-Handler richtet eine Animation ein, die das <button>-Element zur Position des Mauszeigers animiert. Dies könnte zu einer riesigen Animationsliste führen, die ein Speicherleck verursachen könnte. Aus diesem Grund entfernen moderne Browser automatisch vorwärtsfüllende Animationen, die durch andere Animationen überschrieben werden.

Die Anzahl der erstellten Animationen wird angezeigt. Ein remove-Ereignis-Listener wird verwendet, um die Anzahl der entfernten Animationen zu zählen und anzuzeigen.

Alle bis auf eine der Animationen sollten schließlich entfernt werden.

HTML

html
<button id="start">Click to drag</button>
<br />
<button id="reset">Reset example</button>
<p>
  Click the button to start the animation (disabled by default to protect those
  who suffer migraines when experiencing such animations).
</p>
<p>Animations created: <span id="count-created">0</span></p>
<p>Animations removed: <span id="count-removed">0</span></p>

CSS

css
:root,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  margin: 0.5rem 0;
}

JavaScript

js
const button = document.querySelector("#start");
let created = 0;
let removed = 0;

button.addEventListener(
  "click",
  () => {
    document.body.addEventListener("mousemove", (event) => {
      const animation = button.animate(
        { transform: `translate(${event.clientX}px, ${event.clientY}px)` },
        { duration: 500, fill: "forwards" },
      );
      created++;
      showCounts();

      // the remove event fires after the animation is removed
      animation.addEventListener("remove", () => {
        removed++;
        showCounts();
      });
    });
  },
  { once: true },
);

function showCounts() {
  document.getElementById("count-created").textContent = created;
  document.getElementById("count-removed").textContent = removed;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});

Ergebnis

Spezifikationen

Specification
Web Animations
# dom-animation-onremove
Web Animations
# remove-event

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch