Тормозит css-анимация

#html #css #вёрстка #анимация #css_animation

Суть вопроса в следующем. На сайте есть sidebar (выезжающее справа меню), анимация
которого построена на css-transitions. В неактивном состоянии sidebar имеет следующий код:

position: fixed;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
width: 300px;
background: #fff;
z-index: 9999;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
transform: translate(300px, 0px);


в активном состоянии к нему добавляется класс с таким кодом:

transform: translate(0px, 0px);
opacity: 1;


Проблема в том, что периодически наблюдаются тормоза при открытии/закрытии меню.
Профайлер Google Chrome толком не дает никакой информации по причине подвисаний. На
кадр анимации уходит всего 1-3 ms, но FPS может упасть до 15-20 кадров. Тормоза вылазят
периодически (в эти моменты тормозит вся анимация), из закономерностей заметил, что
они часто появляются в периоды простоя (когда на сайте не совершается никаких действий
20-30 секунд).

Полагаю, возможная причина отчасти в самом железе/ПО (хотя оно шустрое), но хотелось
бы устранить подвисания. Отсюда вопросы:


В чем причина подобных тормозов, кто сталкивался с этим?
Какие решения Вы использовали, чтобы сделать анимацию более плавной?


P.S. "will-change: transform;" не сильно поможет, т.к. браузер и без него все выносит
на отдельный слой.
    

Ответы

Ответ 1

Уберите свойство opacity: 1;. Во-первых, оно бесполезно в данном случае, а во вторых
- именно оно может влиять на FPS. Если же вам действительно необходимо скрывать блок,
замените opacity на visibility.

К примеру, здесь реализовал подобное меню и работает без лагов.


Ответ 2

Добиться более плавной анимации помог комплекс следующих действий:


Точное указание property у transition (т.е. вместо "transition: all" указываем конкретное
свойство с которым производится анимация).
Использование при JS манипуляции с классами не classList, а className. Переход на
это решение позволил добиться реального прогресса в плавности анимации. В частности,
это решение подсказал VK, там используется такая же схема. Метод className входит в
DOM Core (level 2), имеет практически полную совместимость со всеми браузерами, а также
более эффективно обрабатывается браузерными движками с минимальными задержками.


Ответ 3

opacity - Вам действительно не нужно. 
Лучший вариант для плавности анимации это использование translate3D - особенно хорошо
работает на моб. устройствах. 
Вот здесь можно глянуть скорость загрузки: 
http://jsperf.com/translate3d-vs-xy/28