A API Web Animations, que foi enviada pela primeira vez no Chrome 36, fornece controle JavaScript conveniente das animações no navegador e também está sendo implementada no Gecko e no WebKit.
O Chrome 50 apresenta alterações para melhorar a interoperabilidade com outros navegadores e aumentar a conformidade com a especificação. Estas são as alterações:
- Cancelar eventos
Animation.id
- Mudança de estado do método
pause()
. - Descontinuação de nomes tracejados como chaves em frames-chave
No Chrome 51, algumas dessas alterações são finalizadas:
- Remover nomes tracejados como chaves em frames-chave
Cancelar eventos
A interface Animation
inclui um método para cancelar uma animação, curiosamente chamado de
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 tiver sido inicializado.
Suporte a Animation.id.
Ao criar uma animação usando
element.animate()
,
você pode transmitir várias propriedades. Confira um exemplo de
como animar a opacidade em um objeto:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
A especificação da propriedade id
será definida no objeto
Animation retornado, o que pode ajudar na depuração do conteúdo quando você tiver muitos objetos
Animation para
lidar. Confira um exemplo de como especificar um id
para uma animação instanciada:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Mudança de estado do método pause()
O método pause()
é usado para pausar uma animação em andamento. Se você conferir o estado
da animação usando o atributo playState
,
ele precisará ser definido como paused
depois que o método paused()
for chamado. Nas versões do Chrome anteriores à 50,
o atributo playState
indicaria idle
se a animação ainda não tivesse sido iniciada. No entanto,
agora reflete o estado correto, que é
paused
.
Remover nomes tracejados como chaves em frames-chave
Para obedecer às especificações e a outras implementações, o Chrome 50 vai enviar um aviso ao console se nomes tracejados forem usados para chaves em animações de frames-chave. As strings corretas a serem usadas são nomes camelCase de acordo com a propriedade CSS para algoritmo de conversão do atributo IDL.
Por exemplo, a propriedade CSS margin-left
exige que você transmita
marginLeft
como a chave.
O Chrome 51 não oferece mais suporte a nomes tracejados, então agora é um bom momento para corrigir qualquer conteúdo existente com a nomenclatura correta de acordo com 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 aumentam a conformidade com a especificação, que ajuda a simplificar a criação de conteúdo de páginas da Web para melhorar a interoperabilidade.