Animation: commitStyles()-Methode

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.

Die commitStyles()-Methode des Animation-Interfaces der Web Animations API schreibt die berechneten Werte der aktuellen Stile einer Animation in das style-Attribut des Zielelements. commitStyles() funktioniert auch, wenn die Animation automatisch entfernt wurde.

commitStyles() kann in Kombination mit fill verwendet werden, um den Endzustand einer Animation nach ihrem Ende beizubehalten. Derselbe Effekt könnte allein mit fill erreicht werden, aber die Verwendung von Animationen mit unbefristetem fill wird nicht empfohlen. Animationen haben Vorrang vor allen statischen Stilen, sodass eine Animation mit unbefristetem fill verhindern kann, dass das Zielelement jemals normal gestylt wird.

Die Verwendung von commitStyles() schreibt den Stilzustand in das style-Attribut des Elements, wo sie wie üblich modifiziert und ersetzt werden können.

Syntax

js
commitStyles()

Parameter

Keine.

Rückgabewert

Kein Wert (undefined).

Beispiele

Endzustand einer Animation übernehmen

In diesem Beispiel haben wir zwei Buttons, beschriftet mit „Stile übernehmen“ und „Vorwärts füllen“. Beide Buttons animieren, wenn Sie darauf klicken, und beide Buttons behalten den Endzustand der Animation bei.

Der Unterschied besteht jedoch darin, dass „Vorwärts füllen“ nur fill: "forwards" verwendet, um den Endzustand der Animation beizubehalten: Das bedeutet, dass der Browser den Zustand der Animation unbefristet oder bis zu ihrer automatischen Entfernung aufrechterhalten muss.

Der Button „Stile übernehmen“ hingegen wartet darauf, dass die Animation beendet ist, ruft dann commitStyles() auf und bricht die Animation anschließend ab. Der fertige Stil wird so als Wert des style-Attributs gespeichert, anstatt als Animationszustand.

HTML

html
<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>

JavaScript

js
const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;

commitStyles.addEventListener("click", async (event) => {
  // Start the animation
  offset1 = 100 - offset1;
  const animation = commitStyles.animate(
    { transform: `translate(${offset1}px)` },
    { duration: 500, fill: "forwards" },
  );

  // Wait for the animation to finish
  await animation.finished;
  // Commit animation state to style attribute
  animation.commitStyles();
  // Cancel the animation
  animation.cancel();
});

const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;

fillForwards.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = fillForwards.animate(
    { transform: `translate(${offset2}px)` },
    { duration: 500, fill: "forwards" },
  );
});

Ergebnis

Spezifikationen

Specification
Web Animations
# dom-animation-commitstyles

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch