Как реализуются jQuery css3 transitions?

[Zverushka]

Подскажите, как реализуется css3 плавность в jquery анимации?

Есть плавные слайдеры (без подключения файла стилей), а есть дерганные.

Мне хотелось бы тоже уметь создавать плавную анимацию - как они достигают этого эффекта?

[npofopr]

В интернетах же полно информации.

http://anton.shevchuk.name/javascript/jquery-for-beginners-effects/

[Zverushka]

Нет, вы не поняли.

Анимация на jQuery выполняется немного уловато, рывками чтоли. Не сглаженно в общем, как будто фпс мало, если так понятнее.

Во многих плагинах стоит галка - использовать css3 эффекты для анимации. Это означает, что движения будут очень плавные (потому что используется движок браузера), а не подлагивающие (сделанные на чистым javascript анимации без использования возможностей движка), как сделано изначально.

[npofopr]

http://habrahabr.ru/qa/987/

http://habrahabr.ru/qa/13793/

http://habrahabr.ru/qa/12652/

http://habrahabr.ru/post/188722/

Всего не читал, но вроде как ваши вопросы.

Ну и опять же про это уже много в интернетах сказано было.

[Zverushka]

Все не то. Ссылки из разряда, у меня тормозит, потому что на странице 30 анимаций или я пытаюсь применить настолько сложную трансормацию, что появляются лаги.

Вот пример слайдера, который использует css3

http://bxslider.com/options

useCSS

If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.

Как он это реализует?

[npofopr]

Дак, обычно условие, если включен такой параметр, то делаете вот так...

Открываете http://bxslider.com/lib/jquery.bxslider.js

Находите if(slider.usingCSS){

и смотрите что он делает, я в js не разбираюсь, но уж вы то должны понять.

Если нет файла стилей css отдельно, это же не значит, что стили нельзя задать внутри js слайдера.

Вообще тем же модернизр можно задать тест, и проверять, если браузер поддерживает какую ту штуку, то делать так или иначе (http://yepnopejs.com/)

[Catherine]

useCSS в BxSlider'е отвечает за то, будет использоваться jQuery animation() или CSS transitions. Под "native hardware acceleration" имеется в виду CSS transitions. CSS анимации вроде как лучше используют графический ускоритель, в отличии от анимации Javascript. Просто css-свойства задаются в самом коде слайдера. Вот и весь секрет

[Zverushka]

В общем я так поняла встроенной поддержки этого у jquery нет.

Он каким-то методом определяем поддерживает ли браузер css3, и если поддерживает, то ставит свойство transition и не использует animate - а просто задает свойство объекту, где он должен находиться - а браузер сам анимирует.

Если не поддерживает - то использует animate вручную.

[SelenIT]

Насколько я в курсе, именно так (по крайней мере, так было в тех реализациях, с которыми я сталкивался). Определять поддержку чаще всего принято modernizr-ом.

[nerv]

жуквери анимации прошлый век. Не говоря уже о том, что они там ужасно реализованы. Хотите плавные анимации, используйте css или специальные js библиотеки для анимации.

Тут я писал демку angular.js + animate.css. Ангуляр вряд ли осилите, но css эффекты можете посмотреть, попереключать и использовать в своих проектах

Вот и весь секрет

еще "секрет" в поймать конец css анимации (callback)

http://learn.javascript.ru/css-animation

Edited October 8, 2013 by nerv

[Zverushka]

2 или 3 часа сегодня провозилась, пытаясь сделать плавную аниамацию.

Сначала чисто на транизициях - но как оказалось, если высота элемента авто - анимации не будет.

Потом джеквери приблудами и остановилась на тоглекласс у виджета. Но у меня ппц как резко дергалась анимация. Что такое - почему?

Оказалось, надо убрать тразиции из цсс. И что еще оказалось, как я поняла, виджеты jquery - это как раз реализация эффектов базового ядра через css3 транзиции плюс дополнительные функции. Вот они и конфликтовали вместе с css оформлением.

Я это к чему - получается если хотим css3 плавности - просто берем виджеты - их базовые эффекты и пишем, что нам нужно....

Edited October 20, 2013 by Zverushka

[nerv]

виджеты jquery - это как раз реализация эффектов базового ядра через css3 транзиции

Я это к чему - получается если хотим css3 плавности - просто берем виджеты - их базовые эффекты и пишем, что нам нужно....

чего?

[Zverushka]

Query UI adds quite a bit of functionality on top of jQuery’s built-in effects. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings.

Что означает, что базовая анимация у виджет-эффектов дополнена использованием встроенной анимацией браузеров. Что означает, что если нужно разработать плагин с плавной анимацией - нужно скачать кустом-виджет сборку для разработки аддонов.

[SelenIT]

Query UI добавляет немного новой функциональности cверх встроенных эффектов jQuery. jQuery UI добавляет поддержку для анимации цветов и переходов между классами, а также предоставляет несколько дополнительных динамик анимации.

Где здесь что-либо про встроенную анимацию браузеров?

[Zverushka]

Хм, может это?

Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your Javascript.

Или это не означает, что используются встроенные в браузер транзиции?

Наверное я ошиблась, но линейная функция стала очень гладкой, плюс кривой перевод и создали неверное мнение...

Edited October 22, 2013 by Zverushka

[nerv]

Или это не означает, что используются встроенные в браузер транзиции?

если речь об этом http://jqueryui.com/addClass/ , я так понял что не означает

еще есть такая штука Effeckt.css

Edited October 23, 2013 by nerv