L'API Web Animations, disponible pour la première fois dans Chrome 36, permet de contrôler facilement les animations dans le navigateur en JavaScript. Elle est également implémentée dans Gecko et WebKit.
Chrome 50 introduit des modifications visant à améliorer l'interopérabilité avec d'autres navigateurs et à être plus conforme à la spécification. Voici les modifications apportées:
- Annuler des événements
Animation.id- Changement d'état pour la méthode
pause() - Abandon des noms en pointillés en tant que clés dans les images clés
Dans Chrome 51, certaines de ces modifications sont finalisées:
- Supprimer les noms en pointillés en tant que clés dans les images clés
Annuler des événements
L'interface Animation inclut une méthode permettant d'annuler une animation, appelée cancel() de façon amusante.
Chrome 50 implémente le déclenchement de l'événement d'annulation lorsque la méthode est appelée conformément aux spécifications, ce qui déclenche la gestion des événements via l'attribut oncancel s'il a été initialisé.
Prise en charge d'Animation.id.
Lorsque vous créez une animation à l'aide de element.animate(), vous pouvez transmettre un certain nombre de propriétés. Voici un exemple d'animation de l'opacité sur un objet:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
En spécifiant la propriété id, elle est définie sur l'objet Animation renvoyé, ce qui peut être utile pour déboguer votre contenu lorsque vous avez de nombreux objets Animation à traiter. Voici un exemple de spécification d'un id pour une animation que vous instanciez:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Changement d'état pour la méthode pause()
La méthode pause() permet de mettre en pause une animation en cours. Si vous vérifiez l'état de l'animation à l'aide de l'attribut playState, celui-ci doit être défini sur paused après l'appel de la méthode paused(). Dans les versions de Chrome antérieures à la version 50, l'attribut playState indiquait idle si l'animation n'avait pas encore démarré. Toutefois, elle reflète désormais l'état correct, à savoir paused.
Supprimer les noms en pointillés en tant que clés dans les images clés
Afin de se conformer davantage aux spécifications et à d'autres implémentations, Chrome 50 envoie un avertissement à la console si des noms en pointillés sont utilisés pour les touches dans les animations d'images clés. Les chaînes à utiliser sont les noms CamelCase, conformément à la propriété CSS de l'algorithme de conversion de l'attribut IDL.
Par exemple, pour la propriété CSS margin-left, vous devez transmettre marginLeft en tant que clé.
Chrome 51 supprime complètement la prise en charge des noms en pointillés. C'est donc le bon moment pour corriger tout contenu existant avec le nom correct conformément aux spécifications.
Résumé
Ces modifications rapprochent l'implémentation des animations Web dans Chrome de celles d'autres navigateurs et respectent davantage la spécification, qui permet de simplifier la création de contenu de pages Web et d'améliorer l'interopérabilité.