Animation: commitStyles() Methode

Syntax

commitStyles()

Parameter

Keine.

Rückgabewert

Keine (undefined).

Beschreibung

Die commitStyles() Methode wird hauptsächlich verwendet, um die berechneten Werte für den Endzustand einer Animation in das style-Attribut des Zielelements zu schreiben, sodass die Formatierung auch nach dem Ende der Animation bestehen bleibt. Dies kann erfolgen, wenn die Animation beendet ist (d.h. die finished-Eigenschaft des Animation-Objekts aufgelöst wurde).

commitStyles() zusammen mit der Fill-Einstellung

In älteren Browsern müssen Sie den fill Modus angeben, um die Stile nachdem die Animation beendet ist, auf das Element anwenden zu können.

Der unten stehende Code zeigt, wie Sie ein Element namens animatedElement animieren können, wobei fill: "forwards" gesetzt wird, um die Animationsstile nach dem Ende beizubehalten. Sobald die Animation beendet ist, übertragen wir die Stile auf das Element mit commitStyles().

// Start the animation
const animation = animatedElement.animate(
  { transform: "translate(100px)" },
  { duration: 500, fill: "forwards" },
);

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

Da fill die Animation unbegrenzt beibehält, brechen wir die Animation ab, nachdem wir die Stile übertragen haben.

Beachten Sie, dass derselbe Effekt auch alleine mit fill erzielt werden könnte, jedoch wird die Verwendung von unbestimmt füllenden Animationen nicht empfohlen. Animationen haben Vorrang vor allen statischen Stilen, sodass eine unbestimmt füllende Animation verhindern kann, dass das Zielelement jemals normal gestylt wird.

commitStyles() ohne Setzen des Fill-Modus

In neueren Browsern müssen Sie den fill Modus nicht festlegen (siehe die Browser-Kompatibilitätstabelle für spezifische Versionen).

Der unten stehende Code zeigt, wie Sie ein Element namens animatedElement animieren können, auf die Beendigung der Animation mit der finished-Eigenschaft warten und dann die Stile mit commitStyles() auf das Element übertragen. Da wir fill nicht setzen, brauchen wir die Animation danach nicht abzubrechen.

// Start the animation
const animation = animatedElement.animate(
  { transform: "translate(100px)" },
  { duration: 500 },
);

// Wait for the animation to finish
await animation.finished;

// Commit animation state to the animatedElement style attribute
animation.commitStyles();

commitStyles() funktioniert auch, wenn die Animation automatisch entfernt wurde. Nachdem die Stile des Elements übertragen wurden, können sie wie gewohnt verändert und ersetzt werden.

Beispiele

Animation mit und ohne Verwendung von Fill

Dieses Beispiel zeigt, wie Sie commitStyles() verwenden können, um die berechneten Stile am Ende der Animation zu speichern, sowohl mit als auch ohne die Verwendung von fill. Es zeigt außerdem, was passiert, wenn weder commitStyles() noch fill verwendet werden, zum Vergleich.

Das Beispiel zeigt zunächst zwei Schaltflächen mit der Bezeichnung "commitStyles() only" und "commitStyles() with fill". Beide Schaltflächen animieren, wenn Sie darauf klicken, und beide Schaltflächen rufen commitStyles() auf, um den Endzustand der Animation beizubehalten. Der Unterschied ist, dass "commitStyles() only" nicht fill: "forwards" angibt, um den Endzustand der Animation zu beibehalten. In Browsern, die nicht der aktuellen Spezifikation entsprechen, kann der Endzustand möglicherweise nicht erfasst werden.

Der Code zeigt dann eine Schaltfläche "No commitStyles() or fill" für den Vergleich und eine "Reset"-Schaltfläche.

HTML

<button class="commit-styles">commitStyles() only</button>
<button class="commit-with-fill">commitStyles() with fill</button>
<button class="no-commit-or-fill">No commitStyles() or fill</button>

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

button {
  margin: 0.5rem;
  display: block;
}

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

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

JavaScript

Dieser Code definiert einen Klick-Handler für die Schaltfläche "commitStyles() only". Dies animiert die Schaltfläche, sich nach rechts oder links zu bewegen, wenn sie angeklickt wird. Beachten Sie, dass commitStyles() direkt nach dem Ende der Animation aufgerufen wird.

let offset1 = 0;

const commitStyles = document.querySelector(".commit-styles");

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

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

Dieser Code definiert einen Klick-Handler für die Schaltfläche "commitStyles() with fill". Dies animiert ebenfalls die Schaltfläche, sich nach rechts oder links zu bewegen, wenn sie angeklickt wird. Da es fill definiert, muss die Animation danach abgebrochen werden.

Beachten Sie, dass commitStyles() direkt nach dem Ende der Animation aufgerufen wird.

const commitStylesWithFill = document.querySelector(".commit-with-fill");
let offset2 = 0;

commitStylesWithFill.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = commitStylesWithFill.animate(
    { transform: `translate(${offset2}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();
});

Dieser Code definiert einen Klick-Handler für die Schaltfläche "No commitStyles() or fill". Dies animiert ebenfalls die Schaltfläche, sich nach rechts oder links zu bewegen, wenn sie angeklickt wird. Es wird kein Fill definiert und wir brechen die Animation nicht ab.

const noCommitStylesOrFill = document.querySelector(".no-commit-or-fill");
let offset3 = 0;

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

Ergebnis

Klicken Sie auf die Schaltflächen, um sie zu animieren. Beachten Sie, dass die erste Schaltfläche am Ende der Animation "springen" wird, wenn der aktuelle Browser noch fill benötigt, um Stile nach dem Ende der Animation zu übertragen. Die Schaltfläche "No commitStyles() or fill" springt immer am Ende, da der Endzustand nicht gespeichert wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Web Animations API
• Animation für andere Methoden und Eigenschaften, die Sie zur Steuerung der Web-Seiten-Animation verwenden können.