Die Web Animations API, die erstmals in Chrome 36 eingeführt wurde, bietet eine praktische JavaScript-Steuerung von Animationen im Browser und wird auch in Gecko und WebKit implementiert.
In Chrome 50 wurden Änderungen eingeführt, um die Interoperabilität mit anderen Browsern zu verbessern und die Einhaltung der Spezifikation zu erhöhen. Dazu gehören:
- Termine absagen
Animation.id- Statusänderung für die Methode
pause() - Strichnamen als Schlüssel in Keyframes werden eingestellt
In Chrome 51 sind einige dieser Änderungen bereits abgeschlossen:
- Entfernen von durchgestrichenen Namen als Schlüssel in Keyframes
Termine absagen
Die Benutzeroberfläche Animation enthält eine Methode zum Abbrechen einer Animation, die lustigerweise cancel() heißt.
In Chrome 50 wird das Auslösen des Ereignisses „cancel“ implementiert, wenn die Methode gemäß der Spezifikation aufgerufen wird. Dadurch wird die Ereignisbehandlung über das Attribut oncancel ausgelöst, sofern es initialisiert wurde.
Unterstützung für Animation.id
Wenn Sie eine Animation mit element.animate() erstellen, können Sie eine Reihe von Eigenschaften übergeben. Hier ist ein Beispiel für die Animation der Deckkraft eines Objekts:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Wenn Sie die id-Eigenschaft angeben, wird sie auf dem zurückgegebenen Animation-Objekt festgelegt. Das kann beim Debuggen von Inhalten hilfreich sein, wenn Sie viele Animation-Objekte verarbeiten müssen. Hier ein Beispiel dafür, wie Sie einen id für eine von Ihnen instanziierte Animation angeben:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Statusänderung für die Methode „pause()“
Mit der Methode pause() wird eine laufende Animation pausiert. Wenn Sie den Status der Animation mit dem Attribut playState prüfen, sollte es nach dem Aufruf der Methode paused() auf paused gesetzt sein. In Chrome-Versionen vor 50 wurde für das Attribut playState der Wert idle angezeigt, wenn die Animation noch nicht gestartet war. Jetzt wird der korrekte Status paused angezeigt.
Entfernen von durchgestrichenen Namen als Schlüssel in Keyframes
Um die Spezifikation und andere Implementierungen weiter einzuhalten, sendet Chrome 50 eine Warnung an die Konsole, wenn für Schlüssel in ‑Animations-Keyframes gestrichelte Namen verwendet werden. Die richtigen Strings sind CamelCase-Namen gemäß dem Conversion-Algorithmus für die CSS-Eigenschaft zum IDL-Attribut.
Für die CSS-Eigenschaft margin-left müssen Sie beispielsweise marginLeft als Schlüssel übergeben.
In Chrome 51 wird die Unterstützung für Namen mit Bindestriche vollständig entfernt. Jetzt ist also ein guter Zeitpunkt, alle vorhandenen Inhalte gemäß der Spezifikation zu korrigieren.
Zusammenfassung
Durch diese Änderungen wird die Implementierung von Web-Animationen in Chrome der anderer Browser angenähert und die Einhaltung der Spezifikation verbessert. So wird die Erstellung von Webseiteninhalten für eine bessere Interoperabilität vereinfacht.