Animation: remove-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onremove = (event) => { }

Ereignistyp

Ein AnimationPlaybackEvent. Erbt von Event.

In diesem Beispiel gibt es ein <button id="start">-Element und einen Event-Listener, der bei jeder Mausbewegung ausgeführt wird. Der Event-Handler für mousemove erstellt eine Animation, die das <button>-Element zur Position des Mauszeigers bewegt. Dadurch könnte eine sehr lange Liste von Animationen entstehen, die ein Speicherleck verursachen könnte. Aus diesem Grund entfernen moderne Browser automatisch Animationen, die im Endzustand verbleiben und von anderen Animationen überschrieben werden.

Die Anzahl der erstellten Animationen wird angezeigt. Ein Event-Listener für remove zählt außerdem die entfernten Animationen und zeigt ihre Anzahl an.

Bis auf eine sollten schließlich alle Animationen 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

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();
});