A API Web Animations, que foi lançada no Chrome 36, oferece um controle conveniente de JavaScript de animações no navegador e também está sendo implementada no Gecko e no WebKit.
O Chrome 50 apresenta mudanças para melhorar a interoperabilidade com outros navegadores e para ser mais compatível com a especificação. Essas mudanças são:
- Cancelar eventos
Animation.id- Mudança de estado para o método
pause() - Descontinuação de nomes com traços como chaves em frames-chave
No Chrome 51, algumas dessas mudanças foram finalizadas:
- Remoção de nomes com traços como chaves em frames-chave
Cancelar eventos
A interface Animation
inclui um método para cancelar uma animação, chamado
cancel().
O Chrome 50 implementa o disparo do evento de cancelamento quando o método é chamado de acordo
com a especificação, o que aciona o processamento de eventos pelo
atributo oncancel
se ele foi inicializado.
Suporte para Animation.id
Ao criar uma animação usando
element.animate(),
é possível transmitir várias propriedades. Confira um exemplo de
animação de opacidade em um objeto:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Ao especificar a propriedade id, ela será definida no objeto
Animation retornado,
o que pode ajudar no debug do conteúdo quando você tem muitos objetos
Animation para lidar. Confira um exemplo de como especificar um id para uma animação que você instancia:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Mudança de estado para o método pause()
O método pause()
é usado para pausar uma animação em andamento. Se você verificar o estado
da animação usando o atributo playState,
ele será definido como paused
depois que o método paused() for chamado. Nas versões do Chrome anteriores à 50,
o atributo playState
indicava idle se a animação ainda não tivesse começado. No entanto,
agora ele reflete o estado correto, que é
paused.
Como remover nomes com traços como chaves em frames-chave
Para obedecer ainda mais à especificação e a outras implementações, o Chrome 50 envia um aviso para o console se nomes com traços forem usados para chaves em animações de keyframe. As strings corretas a serem usadas são nomes com letras maiúsculas e minúsculas, de acordo com a propriedade CSS para o atributo IDL algoritmo de conversão.
Por exemplo, a propriedade CSS margin-left exigiria que você transmitisse
marginLeft como a chave.
O Chrome 51 removeu o suporte para nomes com traços. É hora de corrigir o conteúdo com a nomenclatura correta, conforme a especificação.
Resumo
Essas mudanças aproximam a implementação de animações da Web do Chrome de outras implementações de navegadores e tornam a especificação mais compatível, o que ajuda a simplificar a criação de conteúdo de páginas da Web para melhorar a interoperabilidade.