Animation: remove Event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Das remove-Ereignis des Animation-Interfaces wird ausgelöst, wenn die Animation vom Browser automatisch entfernt wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-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 aus dem übergeordneten Interface Event verfügbar.

AnimationPlaybackEvent.currentTime Schreibgeschützt

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

AnimationPlaybackEvent.timelineTime Schreibgeschützt

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

Beispiele

Entfernen von ersetzten Animationen

In diesem Beispiel haben wir ein <button id="start">-Element und einen Ereignis-Listener, der immer dann ausgeführt wird, wenn sich die Maus bewegt. Der mousemove-Ereignishandler richtet eine Animation ein, die den <button> zur Position des Mauszeigers animiert. Dies könnte zu einer großen Animationsliste führen, was ein Speicherleck verursachen könnte. Aus diesem Grund entfernen moderne Browser automatisch vorwärtsfüllende Animationen, die von anderen 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

Siehe auch