Animation: commitStyles() Methode

Keine.

Keiner (undefined).

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 Gestaltung nach dem Ende der Animation bestehen bleibt. Dies kann geschehen, wenn die Animation beendet ist (d.h. die Animation Objekt's finished Eigenschaft aufgelöst wurde).

In älteren Browsern müssen Sie den fill Modus angeben, um die Stile nach dem Abschluss der Animation auf das Element anwenden zu können.

Der folgende Code zeigt, wie Sie ein Element namens animatedElement animieren können, indem Sie fill: "forwards" setzen, um die Animationsstile nach deren Abschluss zu bewahren. Sobald die Animation abgeschlossen ist, werden die Stile mit commitStyles() auf das Element angewendet.

// 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 auf unbestimmte Zeit aufrechterhält, stornieren wir die Animation, nachdem wir die Stile übernommen haben.

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

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

Der folgende Code zeigt, wie Sie ein Element namens animatedElement animieren können, auf das Beenden der Animation mit der finished Eigenschaft warten und dann die Stile mit commitStyles() auf das Element anwenden. Da wir nicht fill setzen, müssen wir die Animation danach nicht abbrechen.

// 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, selbst wenn die Animation automatisch entfernt wurde. Sobald die Stile des Elements übernommen wurden, können sie normal modifiziert und ersetzt werden.

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

Das Beispiel zeigt zunächst zwei Schaltflächen mit den Bezeichnungen "commitStyles() only" und "commitStyles() with fill". Beide Schaltflächen animieren, wenn Sie sie anklicken, und beide Schaltflächen rufen commitStyles() auf, um den Endzustand der Animation zu bewahren. Der Unterschied besteht darin, dass "commitStyles() only" nicht fill: "forwards" angibt, um den Endzustand der Animation zu bewahren. In Browsern, die nicht der aktuellen Spezifikation entsprechen, wird der Endzustand möglicherweise nicht erfasst.

Der Code zeigt dann eine Schaltfläche "No commitStyles() or fill", die zum Vergleich verwendet werden kann, 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". Diese animiert die Schaltfläche, um sie beim Klicken nach rechts oder links zu bewegen. Beachten Sie, dass commitStyles() unmittelbar nach dem Abschluss 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". Diese animiert ebenfalls die Schaltfläche, um sie beim Klicken nach rechts oder links zu bewegen. Da es ein fill definiert, muss die Animation danach abgebrochen werden.

Beachten Sie, dass commitStyles() unmittelbar nach dem Abschluss 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". Diese animiert ebenfalls die Schaltfläche, um sie beim Klicken nach rechts oder links zu bewegen. Es definiert kein fill und wir stornieren die Animation nicht.

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 "springt", wenn der aktuelle Browser noch fill benötigt, um Stile nach dem Ende der Animation zu übernehmen. Die Schaltfläche "No commitStyles() or fill" springt am Ende immer, da der Endzustand nicht gespeichert wird.

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