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

538
16 марта 2017, 20:11

Суть вопроса в следующем. На сайте есть 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 секунд).

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

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

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

Answer 1

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

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

READ ALSO
При обновлении сайта выдает `alert` [требует правки]

При обновлении сайта выдает `alert` [требует правки]

При обновлении или загрузке сайта, выдает alert

247
Как добавить фильтр bem в atom?

Как добавить фильтр bem в atom?

Как добавить фильтр bem в сниппет atoma? чтоб не приходилось постоянно прописывать |bemПробовал добавлять File->Snippets(snippets

309
Как в twig вывести активный элементы первым?

Как в twig вывести активный элементы первым?

Имеем массив объектов, которые нужно вывести

314