Плавная анимация на js, css?

Question

[Max_Borisov]

Добрый день!
Сделал анимацию появления/скрытия блоков на css+js (появление/скрытие через scale, перемещение через изменение значения left и top) - maxborsu.bget.ru/gg (раздел Галерея). Но при движении фотки "дергаются". Пытался скорость менять, эффект тот же...
preview.themeforest.net/item/delicieux-exquisite-r... - здесь сделано почти также, только изменение позиции через translate делается, но тут анимация плавная.
В чем может быть проблема?

Answer 1

[Михаил]

Вы сами ответили на свой вопрос. Анимация через изменения позиции через top, left и т.д. считается плохой практикой. Подробнее можно почитать здесь

Comments

[Max_Borisov]

А как через js правильно изменить значение translate? Чтобы не потерять префиксы.

[Михаил]

Max_Borisov: а зачем? Манипулируйте классами, добавляйте в момент анимации, удаляйте после и т.д.

[Max_Borisov]

В зависимости от кол-ва элементов, подходящих под запрос, мне нужны высчитать, на каком месте будет стоять изображение. Посмотрите пример, пжл, разве можно это сделать без высчитывания позиции?

[Михаил]

Max_Borisov: В принципе при необходимости, можно чем-то подобным воспользоваться.

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

[Max_Borisov]

А можете посмотреть, в моем случае есть еще варианты, кроме как высчитывать?

Answer 2

[GreatRash]

Проблема как раз в том, что перемещение для плавности надо делать при помощи translate. Если позарез надо именно left/right, то в стиль элементу можно добавить следующие правила (лучше все сразу, чтобы поддержать всякие сафари и разные версии хромов):

.animatedElem {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   
   /* пишут, что работает лучше чем translateZ на мобилках */
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

Comments

[Иван Вишневский]

Эти хаки уже не слишком актуальны ввиду поддержки will-transform

[GreatRash]

forgetable: смотря на какие браузеры ориентироваться.

Answer 3

[Иван Вишневский]

Да, всё верно, для анимаций стоит использовать только translate, так как устройствам просто её оптимизировать и она ест меньше ресурсов. Ещё не стоит забывать о will-transform.

Comments

[Max_Borisov]

А как через js правильно изменить значение translate? Чтобы не потерять префиксы.

[Иван Вишневский]

Max_Borisov:
Вот здесь, ответ после отмеченного правильным.
stackoverflow.com/questions/8889014/setting-vendor...