@Max_Borisov

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

Добрый день!
Сделал анимацию появления/скрытия блоков на css+js (появление/скрытие через scale, перемещение через изменение значения left и top) - maxborsu.bget.ru/gg (раздел Галерея). Но при движении фотки "дергаются". Пытался скорость менять, эффект тот же...
preview.themeforest.net/item/delicieux-exquisite-r... - здесь сделано почти также, только изменение позиции через translate делается, но тут анимация плавная.
В чем может быть проблема?
  • Вопрос задан
  • 3722 просмотра
Пригласить эксперта
Ответы на вопрос 3
FFxSquall
@FFxSquall
Могу писать код, могу не писать
Вы сами ответили на свой вопрос. Анимация через изменения позиции через top, left и т.д. считается плохой практикой. Подробнее можно почитать здесь
Ответ написан
@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);
}
Ответ написан
@forgetable
Node/Flutter/C++
Да, всё верно, для анимаций стоит использовать только translate, так как устройствам просто её оптимизировать и она ест меньше ресурсов. Ещё не стоит забывать о will-transform.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы