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 cumplir con las especificaciones. Estos cambios son los siguientes:
- Cancelar eventos
Animation.id- Cambio de estado del método
pause() - Baja de los nombres discontinuos como claves en los fotogramas clave
En Chrome 51, algunos de estos cambios están finalizados:
- Quitar los nombres con guiones como claves de los fotogramas clave
Cancelar eventos
La interfaz Animation incluye un método para cancelar una animación, llamado cancel().
Chrome 50 implementa la activación del evento de cancelación cuando se llama al método según la especificación, lo que activa el control 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, a continuación se incluye 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 mostrará, lo que puede ser útil a la hora de depurar tu contenido si tienes que lidiar con muchos objetos Animation. Este es un ejemplo de cómo especificar un id para una animación para la que creaste una instancia:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Cambio de estado del método pause()
El método pause() se usa para pausar una animación que está en curso. Si compruebas el estado de la animación con el atributo playState, se debe establecer en paused después de que se haya llamado al método paused(). En las versiones de Chrome anteriores a la 50, el atributo playState indicaría idle si la animación aún no había comenzado; sin embargo, ahora refleja el estado correcto, que es paused.
Quitar los nombres con guiones como claves de los fotogramas clave
Para cumplir 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 strings correctas que debes usar son los nombres cameCase según el algoritmo de conversión de la propiedad CSS al atributo IDL.
Por ejemplo, la propiedad margin-left de CSS requiere que pases marginLeft como la clave.
Chrome 51 ya no admite los nombres discontinuos, por lo que ahora es un buen momento para corregir cualquier contenido existente con la nomenclatura correcta según las especificaciones.
Resumen
Estos cambios acercan la implementación de animaciones web de Chrome a otras implementaciones de navegadores y cumplen con la especificación que ayuda a simplificar la creación de contenido de páginas web para una mejor interoperabilidad.