API веб-анимации , который впервые появился в Chrome 36, обеспечивает удобное управление анимацией в браузере с помощью JavaScript, а также реализуется в Gecko и WebKit.
В Chrome 50 представлены изменения, улучшающие совместимость с другими браузерами и обеспечивающие большее соответствие спецификации. Эти изменения таковы:
- Отменить мероприятия
-
Animation.id - Изменение состояния метода
pause() - Прекращение использования пунктирных имен в качестве ключей в ключевых кадрах.
В Chrome 51 некоторые из этих изменений доработаны:
- Удаление пунктирных имен в качестве ключей в ключевых кадрах
Отменить мероприятия
Интерфейс Animation включает в себя метод отмены анимации, который, как ни странно, называется cancel() . Chrome 50 реализует событие отмены при вызове метода в соответствии со спецификацией, что запускает обработку события через атрибут oncancel , если он был инициализирован.
Поддержка Animation.id
Когда вы создаете анимацию с помощью element.animate() вы можете передать ряд свойств. Например, вот пример анимации непрозрачности объекта:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Если указать свойство id , оно будет установлено для возвращаемого объекта Animation , что может помочь при отладке контента, когда вам нужно иметь дело с большим количеством объектов Animation . Вот пример того, как указать id для анимации, которую вы создаете:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Изменение состояния метода паузы()
Метод pause() используется для приостановки текущей анимации. Если вы проверяете состояние анимации с помощью атрибута playState , она должна быть установлена на paused после вызова метода paused() . В версиях Chrome до 50 атрибут playState указывал бы на idle если бы анимация еще не началась, однако теперь он отражает правильное состояние — paused .
Удаление пунктирных имен в качестве ключей в ключевых кадрах
Для дальнейшего соответствия спец. и других реализациях, Chrome 50 отправляет предупреждение на консоль, если для ключей в анимации ключевых кадров используются пунктирные имена. Правильными строками являются имена в верблюжьем регистре, соответствующие алгоритму преобразования атрибутов CSS в IDL.
Например, свойство CSS « margin-left потребует от вас передачи поля marginLeft в качестве ключа.
В Chrome 51 полностью удалена поддержка пунктирных имен, поэтому сейчас самое время исправить любой существующий контент, присвоив ему правильные имена в соответствии со спецификацией.
Краткое содержание
Эти изменения приближают реализацию веб-анимации в Chrome к реализациям других браузеров и делают ее более совместимой со спецификацией, что помогает упростить создание контента веб-страниц и улучшить совместимость.