Animation: commitStyles() Methode - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Animation: commitStyles() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Die commitStyles()-Methode der Animation-Schnittstelle der Web Animations API schreibt die berechneten Werte der aktuellen Stile der Animation in das style-Attribut des Zielelements.

Sie wird hauptsächlich verwendet, um die Stile für den Endzustand einer Animation in das Zielelement zu schreiben, damit die Gestaltung nach Beendigung der Animation erhalten bleibt.

In diesem Artikel

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, damit die Gestaltung nach Beendigung der Animation erhalten bleibt. Dies kann geschehen, wenn die Animation abgeschlossen ist (wenn also die finished-Eigenschaft des Animation-Objekts aufgelöst wurde).

commitStyles() zusammen mit Fill-Modus

In älteren Browsern müssen Sie den fill-Modus angeben, um in der Lage zu sein, die Stile an das Element nachdem die Animation beendet ist, zu übernehmen.

Der untenstehende Code zeigt, wie Sie ein Element mit dem Namen animatedElement animieren und fill: "forwards" setzen können, um die Animationsstile nach dem Ende beizubehalten. Sobald die Animation beendet ist, übernehmen wir die Stile auf das Element mit commitStyles().

js
// 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 unbefristet beibehält, beenden wir die Animation, sobald wir die Stile übernommen haben.

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

Hinweis: Sie könnten auch vermeiden, den Endzustand explizit zu speichern, indem Sie diese als Anfangsstile des Elements festlegen und zu den Endstilen animieren.

commitStyles() ohne Festlegung des Fill-Modus

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

Hinweis: Es gibt keine Möglichkeit, dieses neue Verhalten zu überprüfen. Vorerst sollten die meisten Codes weiterhin fill setzen, wie im vorherigen Abschnitt gezeigt.

Der untenstehende Code zeigt, wie Sie ein Element mit dem Namen animatedElement animieren, auf den Abschluss der Animation mit der finished-Eigenschaft warten und dann die Stile auf das Element mit commitStyles() übernehmen. Da wir fill nicht setzen, müssen wir die Animation anschließend nicht stornieren.

js
// 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 übernommen wurden, können sie wie gewohnt geä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 Verwendung von fill. Es bietet auch ein Beispiel dafür, was passiert, wenn weder commitStyles() noch fill verwendet werden, zum Vergleich.

Das Beispiel zeigt zuerst zwei Schaltflächen mit der Bezeichnung "commitStyles() only" und "commitStyles() with fill". Beide Schaltflächen animieren sich, wenn Sie sie anklicken, und beide Schaltflächen rufen commitStyles() auf, um den Endzustand der Animation beizubehalten. Der Unterschied besteht darin, dass "commitStyles() only" nicht fill: "forwards" angibt, um den Endzustand der Animation zu erhalten. 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

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". Dieses animiert die Schaltfläche, um sich beim Klicken nach rechts oder links zu bewegen. Beachten Sie, dass commitStyles() unmittelbar nach Beendigung der Animation aufgerufen wird.

js
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". Dieser animiert ebenfalls die Schaltfläche, sich beim Klicken nach rechts oder links zu bewegen. Da es ein fill definiert, muss die Animation anschließend abgebrochen werden.

Beachten Sie, dass commitStyles() unmittelbar nach Beendigung der Animation aufgerufen wird.

js
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". Dieser animiert ebenfalls die Schaltfläche, sich beim Klicken nach rechts oder links zu bewegen. Es definiert kein Fill und die Animation wird nicht abgebrochen.

js
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 weiterhin fill erfordert, damit die Stile nach Ende der Animation übernommen werden. Die Schaltfläche "No commitStyles() or fill" springt immer am Ende, da der Endzustand nicht gespeichert ist.

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Web Animations API
Animation
Konstruktor
1. Animation()
Instanzeigenschaften
Instanzmethoden
Events
Vererbung
1. EventTarget
Verwandte Seiten für Web Animations
Anleitungen
1. Verwendung der Web Animations API
2. Konzepte der Web Animations API
3. Keyframe-Formate
4. Web Animation API Tipps und Tricks

Animation: commitStyles() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Beschreibung