4

Суть вопроса в следующем. На сайте есть 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; не помогает, т.к. браузер и без него всё выносит в отдельный слой.

1
  • отчасти помогло более конкретное определение свойств у transition. В данном примере вместо "transition: all 250ms ease-in-out;" указал "transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;" 19 мар 2017 в 17:33

3 ответа 3

3

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

  1. Точное указание property у transition (т.е. вместо "transition: all" указываем конкретное свойство с которым производится анимация).
  2. Использование при JS манипуляции с классами не classList, а className. Переход на это решение позволил добиться реального прогресса в плавности анимации. В частности, это решение подсказал VK, там используется такая же схема. Метод className входит в DOM Core (level 2), имеет практически полную совместимость со всеми браузерами, а также более эффективно обрабатывается браузерными движками с минимальными задержками.
3
  • Уберите свойство opacity: 1;. Во-первых, оно бесполезно в данном случае, а во вторых – именно оно может влиять на FPS. Если же вам действительно необходимо скрывать блок, замените opacity на visibility.
  • В transition нужно указать именно то свойство, которое будет анимироваться – вместо transition: all .25s производительнее будет transition: transform .25s. Если у вас несколько свойств, которые нужно анимировать, можно написать так: transition: transform .25s, opacity .25s.

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

6
  • такая же проблема с 1000.tech. при первом открытии все идеально, но стоит некоторое время повисеть на сайте, как появляются небольшие урывки при открытии/закрытии меню. 14 мар 2017 в 16:52
  • @DmitryMaslennikov попробуйте затестировать меню в инкогнито режиме с единственной вкладкой. Может у вас какие-то плагины кушают память?
    – YozhEzhi
    14 мар 2017 в 19:58
  • @DmitryMaslennikov соглашусь с соседним комментарием. Скорее всего что-то уже на вашей стороне. 14 мар 2017 в 21:40
  • @YozhEzhi да, есть веские подозрения, что проблема именно на моей стороне, но точно не узнаешь, пока не выгрузишь проект на продакшн. полагаю дело даже не в браузерах (тормозит как в Chrome, так и в IE), а в чем-то на уровне взаимодействия с ОС (на ноуте много специфического ПО для разработки, различных библиотек и программ, которые тесно работают с ОС). другой вопрос, что хочется найти решения и для таких ситуаций, чтобы сохранить плавность анимации. 14 мар 2017 в 23:19
  • 1
    @YozhEzhi отчасти помогло более конкретное определение свойств у transition. В данном примере вместо "transition: all 250ms ease-in-out;" указал "transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;". 19 мар 2017 в 17:33
-1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.