L'API Web Animations, qui a été publiée pour la première fois dans Chrome 36, permet de contrôler facilement les animations dans le navigateur à l'aide de JavaScript. Elle est également en cours d'implémentation dans Gecko et WebKit.
Chrome 50 introduit des modifications visant à améliorer l'interopérabilité avec les autres navigateurs et à être plus conforme à la spécification. Voici les modifications apportées:
- Annuler les événements
Animation.id- Modification de l'état pour la méthode
pause() - Abandon des noms en tirets comme clés dans les images clés
Dans Chrome 51, certaines de ces modifications sont finalisées:
- Suppression des noms en tirets en tant que clés dans les images clés
Annuler les événements
L'interface Animation inclut une méthode permettant d'annuler une animation, appelée cancel().
Chrome 50 implémente le déclenchement de l'événement de suppression lorsque la méthode est appelée conformément à la spécification, ce qui déclenche la gestion des événements via l'attribut oncancel s'il a été initialisé.
Compatibilité avec 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 sera définie sur l'objet Animation renvoyé, ce qui peut vous aider à déboguer votre contenu lorsque vous avez de nombreux objets Animation à gérer. 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"});
Modification de l'é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, il 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 commencé. Toutefois, il reflète désormais l'état correct, à savoir paused.
Suppression des noms en tirets en tant que clés dans les images clés
Pour mieux respecter la spécification et les autres implémentations, Chrome 50 envoie un avertissement à la console si des noms en tiret sont utilisés pour les clés dans les animations de clés-images. Les chaînes à utiliser sont des noms en CamelCase, conformément à l'algorithme de conversion de la propriété CSS vers l'attribut IDL.
Par exemple, la propriété CSS margin-left vous oblige à transmettre marginLeft comme clé.
Chrome 51 supprime complètement la prise en charge des noms avec tiret. Il est donc temps de corriger tout contenu existant en utilisant le nom correct, conformément aux spécifications.
Résumé
Ces modifications rapprochent l'implémentation des animations Web dans Chrome de celle des autres navigateurs et la rendent plus conforme à la spécification, ce qui permet de simplifier la création de contenu pour une meilleure interopérabilité.