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 Web Animations API Animation
-Interfaces schreibt die berechneten Werte der aktuellen Stile der 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 auch nach deren Ende beizubehalten. Der gleiche Effekt könnte allein mit fill
erreicht werden, jedoch wird die Verwendung von unbegrenzt füllenden Animationen nicht empfohlen. Animationen haben Vorrang vor allen statischen Stilen, daher kann eine unbegrenzt füllende Animation verhindern, dass das Zielelement jemals normal gestylt wird.
Durch die Verwendung von commitStyles()
wird der Styling-Zustand in das style
-Attribut des Elements geschrieben, wo sie wie gewohnt modifiziert und ersetzt werden können.
Syntax
commitStyles()
Parameter
Keine.
Rückgabewert
Keine (undefined
).
Beispiele
Festschreiben des Endzustands einer Animation
In diesem Beispiel haben wir zwei Schaltflächen, die mit "Stile festschreiben" und "Vorwärts füllen" beschriftet sind. Beide Schaltflächen animieren, wenn Sie darauf klicken, und beide Schaltflächen 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: Dies bedeutet, dass der Browser den Zustand der Animation unbegrenzt oder bis zur automatischen Entfernung beibehalten muss.
Die Schaltfläche "Stile festschreiben" hingegen wartet, bis die Animation beendet ist, ruft dann commitStyles()
auf und bricht anschließend die Animation ab, sodass der fertige Stil als Wert des style
-Attributs erfasst wird, 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
Siehe auch
- Web Animations API
Animation
für andere Methoden und Eigenschaften, die Sie zur Steuerung von Webseiten-Animationen verwenden können.