Tipps und Tricks zur Web-Animation-API

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

Dies ist eine Möglichkeit, dies zu tun, die eine stabile und zuverlässige Methode darstellt.

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

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

Lassen Sie uns die Box mit CSS stylen.

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

Als nächstes betrachten wir das JavaScript, 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 playAnimation-Methode ruft die Methode Element.animate() auf dem Element auf, um die Animation abzuspielen. Die animate()-Methode nimmt ein Keyframe-Objekt oder ein Array von Keyframe-Objekten sowie Animationsoptionen als Argumente. In diesem Fall übergeben wir der Methode das colorChangeFrames-Keyframe-Objekt und eine Animationsdauer.

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

button.addEventListener("click", playAnimation);

Im vorherigen Beispiel, wenn der Ausführen-Button angeklickt wird, bevor die Animation abgeschlossen ist, wird die aktuelle Animation abrupt gestoppt und die Animation startet vom 0% oder from-Start-Keyframe neu. Wenn Sie möchten, dass die aktuelle Animationsiteration abgeschlossen wird, bevor eine neue beginnt, 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 zulassen wollen, können wir prüfen, ob eine Animation auf dem Element läuft und die animation-iteration-Anzahl für jeden Klick auf den Button inkrementieren, während die Animation läuft.

In diesem Beispiel aktualisieren wir unsere playAnimation()-Funktion, um den Button beim Klicken zu deaktivieren und auf das finish-Ereignis zu hören, 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.

Die Eigenschaften, die während einer CSS-Animation animiert werden, verhalten sich so, als wären sie in der will-change-Eigenschaftsdeklaration enthalten. Jede Eigenschaft, die einen Stapelkontext erstellen würde, wenn sie als will-change markiert ist, sorgt dafür, dass das Element einen neuen Stapelkontext erhält.

Im Fall von animation-fill-mode: forwards (und both) bleiben die animierten Eigenschaften nach dem Ende der Animation in ihrem letzten Keyframe-Zustand. Die Eigenschaften behalten den will-change-Status, sodass, wenn ein neuer Stapelkontext während der Animation erstellt wird und am Ende der Animation noch vorhanden ist, das Ziel-Element den Stapelkontext beibehält, nachdem die Animation abgeschlossen ist.

• Web-Animationen API
• Animations-Interface
• CSS-Animations- Modul