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
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
<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>
JavaScript
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
commitStyles |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Web Animations API
Animation
, um weitere Methoden und Eigenschaften zum Steuern von Animationen auf Websites zu entdecken.