La API de Web Animations, que se envió por primera vez en Chrome 36, proporciona un control conveniente de JavaScript de las animaciones en el navegador y también se está implementando en Gecko y WebKit.
Chrome 50 presenta cambios para mejorar la interoperabilidad con otros navegadores y para cumplir mejor con las especificaciones. Estos son los cambios:
- Cancela eventos
Animation.id- Cambio de estado del método
pause() - Baja de los nombres con guiones como claves en fotogramas clave
En Chrome 51, se finalizaron algunos de estos cambios:
- Se quitaron los nombres con guiones como claves en los fotogramas clave.
Cancela eventos
La interfaz Animation incluye un método para cancelar una animación, que se llama cancel().
Chrome 50 implementa el disparo del evento de cancelación cuando se llama al método según la especificación, lo que activa el manejo de eventos a través del atributo oncancel si se inicializó.
Compatibilidad con Animation.id
Cuando creas una animación con element.animate(), puedes pasar varias propiedades. Por ejemplo, este es un ejemplo de cómo animar la opacidad en un objeto:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Si especificas la propiedad id, se establecerá en el objeto Animation que se muestra, lo que puede ser útil cuando depures tu contenido y tengas muchos objetos Animation con los que lidiar. Este es un ejemplo de cómo especificarías un id para una animación de la que creas una instancia:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Cambio de estado para el método pause()
El método pause() se usa para pausar una animación en curso. Si verificas el estado de la animación con el atributo playState, este debería establecerse en paused después de que se llame al método paused(). En las versiones de Chrome anteriores a la 50, el atributo playState indicaba idle si la animación aún no había comenzado. Sin embargo, ahora refleja el estado correcto, que es paused.
Se quitaron los nombres con guiones como claves en los fotogramas clave.
Para cumplir aún más con las especificaciones y otras implementaciones, Chrome 50 envía una advertencia a la consola si se usan nombres con guiones para las claves en las animaciones de fotogramas clave. Las cadenas correctas que se deben usar son nombres en mayúsculas y minúsculas según el algoritmo de conversión de la propiedad CSS al atributo IDL.
Por ejemplo, la propiedad CSS margin-left requeriría que pases marginLeft como clave.
Chrome 51 quita por completo la compatibilidad con los nombres con guiones, por lo que ahora es un buen momento para corregir el contenido existente con los nombres correctos según las especificaciones.
Resumen
Estos cambios acercan la implementación de animaciones web de Chrome a otras implementaciones de navegadores y cumplen mejor con las especificaciones, lo que ayuda a simplificar la autoría de contenido de páginas web para mejorar la interoperabilidad.