Веб анимации — element.animate() уже в Chrome 36

[tenbits]

Web Animations это отличная вещь, особенно, что наконец-то появился контроль над анимациями: пауза, ускорение и т.д.

Возможно интересно

У нас есть библиотека на базе CSS3 Transitions с довольно интересным синтаксисом: property | ?fom > to | easing duration delay . Пример модели:

mask.animate(document.body, {
    model: 'transform | > translateX(10%) | 1s ease-in',
    next: {
    	model: [
    		'transform | > scale(0.5) rotate(360deg) | 400ms linear 400ms',
    		'background-color | yellow > cyan | 4s'
    	],
    	next: 'display | > none'
    }
}, console.log.bind(console, "done"));

[DarkByte]

Ох уж этот снег на сайтах, столько негативных эмоций сразу нахлынуло. Каждую зиму одно и тоже, а этой зимой с нативной реализацией в хроме!

[radist2s]

А если кто-то хочет иметь производительные анимации и при этом все делать в привычном jQuery.animate синтаксисе — есть Velocity.js.

[Mew]

Демо снежинок можно посмотреть в двух исполнениях: на нативной реализации и на реализации с помощью полифила.
Странно, что в демках находятся просто 2 гифки. С таким же успехом их можно было б сюда вставить.

Как бы то нибыло, существует полифил
Этот полифил по крайне в данный момент не детектит поддержку свойства, а сразу записывает в прототип (что очень странно) со всеми вытекающими оттуда последствиями. Кроме того создает в глобальном пространстве имен всякий левак в виде таких функций, как Animation, AnimationEffect и пр. То есть сейчас это совсем не полифил, а функция-подражатель. И еще нету поддержки пока что актуального ИЕ8. И ладно бы просто поддержки: из-за многочисленных defineProperty в ИЕ8 будут js-ошибки.

[xamd]

Не особо понял, где вы взяли 2 гифки, т.к. по обоим ссылкам на jsbin лежат полноценные примеры.

Этот полифил по крайне в данный момент не детектит поддержку свойства, а сразу записывает в прототип

Дарёному коню… Вы всегда можете попробовать сделать лучше или не использовать его вовсе.
Проблема IE8 с defineProperty решается modernizr'ом или аналогичным решением. В случае modernizr'a, ошибок в IE8 нет.

[Mew]

Ну я зашел, в фаирбаге посмотрел, у фона body проставлен анимированный гиф. Может я что то не понял.

> Дарёному коню… Вы всегда можете попробовать сделать лучше или не использовать его вовсе.

Не понимаю, при чем тут «сперва добейся», «дареный конь»? Может автору, который провел анализ (http://habrahabr.ru/post/177115/) angular, backbone и пр. тоже сперва написать свою либу с блекджеком, прежде чем указывать на недостатки тех или иных либ? Ну и вообще всем, кто ищет недостатки в либах.

> Проблема IE8 с defineProperty решается modernizr'ом или аналогичным решением. В случае modernizr'a, ошибок в IE8 нет.

Ну ок, жс-ошибки вы победите, но еще придется писать альтернативный код анимации, что не очень прикольно поддерживать. Ну да хрен с ним с ИЕ8, в ИЕ9 тоже жс-ошибки, а ведь он не такой уж и старый. В ИЕ10 не проверял.

[xamd]

Не понимаю, при чем тут «сперва добейся», «дареный конь»? Может автору, который провел анализ (http://habrahabr.ru/post/177115/) angular, backbone и пр. тоже сперва написать свою либу с блекджеком, прежде чем указывать на недостатки тех или иных либ? Ну и вообще всем, кто ищет недостатки в либах.

Обычно на больших проектах так и происходит: вы выбираете каркас для своего приложения, будь то backbone, angular или что-либо ещё, и перепиливаете его под свои нужды, чтобы заткнуть «дырки» в реализации библиотеки/фрейморка.

Ну ок, жс-ошибки вы победите, но еще придется писать альтернативный код анимации, что не очень прикольно поддерживать

По-прежнему не понимаю, о чём вы говорите: есть полифил (уже неоднократно об этом говорили), которые реализует подобную функциональность для устаревших/устаревающих браузеров (посмотрите подробную информацию по IE: www.w3schools.com/browsers/browsers_stats.asp). Тем более, когда это станет стандартом, можно будет не заботиться о IE8, и, возможно, даже IE9.

[Mew]

> Обычно на больших проектах так и происходит: вы выбираете каркас для своего приложения, будь то backbone, angular или что-либо ещё, и перепиливаете его под свои нужды, чтобы заткнуть «дырки» в реализации библиотеки/фрейморка.

Ну собстна, я и не призывал линчевать авторов «полифила», а указал на особенности его реализации. Не понимаю, зачем мне для этого сначала нужно что то свое более лучшее писать. Разумеется, кто захочет воспользоваться сам решит важен ли ему ИЕ8-9.

> По-прежнему не понимаю, о чём вы говорите
Я не знаю как проще объяснить. Я говорю о том, что конкретно этот полифил не получится здесь и сейчас использовать для ИЕ9. Только и всего.

В целом еще о полифиле: т.к. он выпиливает нативный .animate(), возможность его использования вместо greensock кажется очень сомнительной, ведь по сути этот тот же гринсок, ток гринсок еще умеет для ие8. Возможно это кому то будет полезным знать. Хотя вру, гринсок это другое. Но как минимум еще есть zepto, который как раз через css анимирует.

[xamd]

удалено