Web Animation API Tipps und Tricks

Eine Animation erneut ausführen

Die CSS-Animationen-Spezifikation bietet keine Möglichkeit, eine Animation erneut auszuführen. Sie können nicht einfach den animation-play-state eines Elements auf "running" setzen, sobald die Animation endet. Stattdessen müssen Sie JavaScript verwenden, um eine abgeschlossene Animation erneut abzuspielen.

Dies ist eine Methode, die stabil und zuverlässig ist.

HTML

Zuerst definieren wir das HTML für ein <div>, das wir animieren möchten, und einen Button, der die Animation abspielen (oder erneut abspielen) wird.

<div class="box"></div>
<button class="runButton">Run the animation</button>

CSS

Lassen Sie uns die Box mit CSS gestalten.

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin-bottom: 1rem;
}

JavaScript

Als nächstes schauen wir uns das JavaScript an, das die Arbeit erledigt. Die Funktion playAnimation() soll aufgerufen werden, wenn der Benutzer auf den Ausführen-Button klickt. Anstatt die @keyframes-At-Regel zu verwenden, definieren wir die Keyframes in JavaScript.

const box = document.querySelector(".box");
const button = document.querySelector(".runButton");

/*
  equivalent to the following CSS @keyframes

  @keyframes colorChange {
    0% {
      background-color: grey;
    }
    100% {
      background-color: lime;
    }
  }
*/
const colorChangeFrames = { backgroundColor: ["grey", "lime"] };

function playAnimation() {
  box.animate(colorChangeFrames, 4000);
}

Die Methode playAnimation ruft die Methode Element.animate() auf der Box auf, um die Animation abzuspielen. Die Methode animate() nimmt ein Keyframe-Objekt oder ein Array von Keyframe-Objekten und Animationsoptionen als Argumente. In diesem Fall übergeben wir der Methode das colorChangeFrames-Keyframe-Objekt und eine Animationsdauer.

Wir müssen auch einen Ereignishandler zu unserem Ausführungs-Button hinzufügen, damit er tatsächlich etwas tut:

button.addEventListener("click", playAnimation);

Ergebnis

Warten, bis eine Animation abgeschlossen ist, bevor sie gestoppt wird

Im vorherigen Beispiel, wenn der Ausführungs-Button geklickt wird, bevor die Animation abgeschlossen ist, stoppt die aktuelle Animation abrupt, und die Animation beginnt erneut vom 0% oder from-Start-Keyframe. Wenn Sie möchten, dass die aktuelle Animationsiteration abgeschlossen wird, bevor eine neue gestartet wird, können wir den run-Button deaktivieren, während die Animation läuft, und ihn basierend auf dem finish-Ereignis wieder aktivieren. Alternativ, wenn wir mehrere Iterationen der Animation aktivieren möchten, können wir prüfen, ob eine Animation auf dem Element läuft, und die Anzahl der animation-iteration für jeden Button-Klick erhöhen, während die Animation läuft.

In diesem Beispiel aktualisieren wir unsere playAnimation()-Funktion, um den Button zu deaktivieren, wenn er geklickt wird, und lauschen auf das finish-Ereignis, um den Button wieder zu aktivieren.

<div class="box"></div>
<button class="runButton">Run the animation</button>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin-bottom: 1rem;
}

const box = document.querySelector(".box");
const button = document.querySelector(".runButton");
const colorChangeFrames = { backgroundColor: ["grey", "lime"] };

button.addEventListener("click", playAnimation);

function playAnimation() {
  button.setAttribute("disabled", true);
  const anim = box.animate(colorChangeFrames, 4000);

  anim.addEventListener("finish", (event) => {
    button.removeAttribute("disabled");
  });
}

Der Code deaktiviert den Button und startet die Animation. Der Button wird wieder aktiviert, wenn die Animation abgeschlossen ist.

Stapelkontext in Animationen

Die Eigenschaften, die während einer CSS-Animation animiert werden, verhalten sich, als ob sie in der will-change-Eigenschaftsdeklaration enthalten wären. Jede Eigenschaft, die einen Stapelkontext erstellen würde, wenn sie als will-change markiert ist, lässt das Element einen neuen Stapelkontext erhalten.

Im Fall von animation-fill-mode: forwards (und both) bleiben die animierten Eigenschaften nach Abschluss der Animation im Endzustand des End-Keyframes. Die Eigenschaften behalten den will-change-Status, so dass, wenn während der Animation ein neuer Stapelkontext erstellt wird und am Ende der Animation noch vorhanden ist, das Ziel-Element den Stapelkontext nach Abschluss der Animation beibehält.

Siehe auch

• Web Animations API
• Animation Interface
• CSS animations Modul