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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
commitStyles

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch