Element: getAnimations() Methode

Syntax

getAnimations()
getAnimations(options)

Parameter

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthält:

subtree

Ein boolescher Wert, der, wenn true, dazu führt, dass auch Animationen zurückgegeben werden, die Nachkommen von Element anvisieren. Dazu gehören Animationen, die alle CSS-Pseudoelemente betreffen, die an Element oder einen seiner Nachkommen angefügt sind. Standardwert ist false.

pseudoElement

Ein String, der ein Pseudoelement spezifiziert, das als Ziel-Element verwendet wird, wie z.B. ::after.

Beachten Sie, dass die Angabe von sowohl pseudoElement als auch subtree dem alleinigen Spezifizieren von pseudoElement entspricht.

Rückgabewert

Ein Array von Animation-Objekten, von denen jedes eine Animation repräsentiert, die derzeit auf das Element abzielt.

Wenn der Parameter { subtree: true } angegeben wird, umfasst der zurückgegebene Wert auch Animationsobjekte, die auf Nachkommen-Elemente abzielen, einschließlich Pseudoelementen. Wenn options.pseudoElement angegeben ist, umfasst der Rückgabewert nur die Animationsobjekte, die mit dem ausgewählten Pseudoelement übereinstimmen.

Ausnahmen

SyntaxError DOMException

Ein ungültiges Pseudoelement wurde im options.pseudoElement-Parameter übergeben.

Beispiele

Warten auf alle Animationen eines Elements und seiner Nachkommen

Der folgende Code-Schnipsel wartet darauf, dass alle Animationen auf elem und seinen Nachkommen beendet sind, bevor das Element aus dem Dokument entfernt wird.

Promise.all(
  elem.getAnimations({ subtree: true }).map((animation) => animation.finished),
).then(() => elem.remove());

Holen Sie sich Animationen für ein Pseudoelement-Ziel

Dieses Beispiel zeigt einen Fortschrittsbalken mit einem Pseudoelement. Es nutzt getAnimations(), um die Animationen für das Pseudoelement zurückzugeben, startet diese und entfernt dann den Fortschrittsbalken, sobald die Animation abgeschlossen ist.

Beachten Sie, dass der Code einen Fallback-Ansatz verwendet, um die Animationen zu erhalten, falls die pseudoElement-Option nicht unterstützt wird. Es gibt auch versteckten Code, um einen "Neustart"-Button anzuzeigen.

HTML

<div class="progress-bar" id="bar"></div>

CSS

Das CSS stylt das Fortschrittsbalken-Element so, dass es sich über die Breite seines Containers in 3 Sekunden hinweg bewegt. Die Animation ist anfänglich pausiert, damit wir sie in JavaScript starten können.

.progress-bar {
  width: 100%;
  height: 20px;
  background: #eeeeee;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 0%;
  background: #4f46e5;
  border-radius: 4px;
  animation: fill-progress 3s ease-in-out forwards paused;
}

@keyframes fill-progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

JavaScript

Zuerst definieren wir eine Funktion, um die Animationen zu erhalten, die einem bestimmten Element und Pseudoelement zugeordnet sind. Sie ruft getAnimations() mit der pseudoElement-Option auf, und falls dies keine Animationen zurückgibt, wird auf das Filtern der Animationen über subtree zurückgegriffen.

function getAnimationsForPseudo(element, pseudo) {
  // Try the spec-compliant way first (Firefox)
  try {
    const anims = element.getAnimations({ pseudoElement: pseudo });
    // If it returned something, the option is supported, so return the result
    if (anims.length > 0) return anims;
  } catch (e) {
    // invalid selector etc
    return [];
  }

  // Fallback for browsers that only support subtree
  return element
    .getAnimations({ subtree: true })
    .filter((anim) => anim.effect?.pseudoElement === pseudo);
}

Wir verwenden diese Funktion, um alle Animationen zu bekommen, die mit dem Fortschrittsbalken-Pseudoelement verbunden sind. Der Code durchläuft die Animationen, um sie zu starten, und entfernt dann den Fortschrittsbalken, wenn alle Animationen abgeschlossen sind. Beachten Sie, dass wir den Code in requestAnimationFrame() ausführen, um sicherzustellen, dass die Animation bereit ist, bevor unser JavaScript ausgeführt wird.

const bar = document.getElementById("bar");

requestAnimationFrame(() => {
  const anims = getAnimationsForPseudo(bar, "::after");
  anims.forEach((a) => a.play());
  Promise.all(anims.map((a) => a.finished)).then(() => bar.remove());
});

<button id="reset" type="button">Restart</button>

const reload = document.querySelector("#reset");

reload.addEventListener("click", () => {
  window.location.reload(true);
});

Ergebnis

Der Balken sollte sich über die Breite seines Containers bewegen und dann verschwinden. Sie können ihn neu starten, indem Sie den "Neustart"-Button drücken.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Web Animations API
• CSS-Animationen
• CSS-Übergänge
• Document.getAnimations() - Alle Animationen im Dokument abrufen
• Animation