3

При наведении курсора на картинку, добавляется с помощью JS class .active

В стиле active указано, что картинка должно стать blur(10px) и transform: translateY(20px);

Анимация active выполняется отлично, но если мы захотим убрать active, чтобы вернуть обычное состояние, то картинка мигает перед концом анимации...

Как можно исправить?

2
  • 3
    Добавьте пожалуйста код к своему вопросу
    – Arthur
    19 мая 2018 в 11:50
  • @Denver Добро пожаловать на stackoverflow! Если ответ вам был полезен, отметьте его галочкой (около цифры) и/или плюсом. В противном случае не молчите, если что-то не устроило или непонятно в ответе, то напишите в комментарии. 20 мая 2018 в 13:58

1 ответ 1

7

Сниппет для воспроизведения проблемы:

for (let img of document.querySelectorAll('.test')) {
  img.addEventListener('mouseenter', function () { this.classList.add('active'); }); 
  img.addEventListener('mouseleave', function () { this.classList.remove('active'); }); 
}
.test   { transition: all 0.3s ease-out; }
.active { filter: blur(10px); transform: translateY(20px); }
<img class="test" src="https://picsum.photos/200/150/?image=11">
<img class="test" src="https://picsum.photos/200/150/?image=15">
<img class="test" src="https://picsum.photos/200/150/?image=16">

Причина - ресурсоемкость размытия.
Соответственно, на 100% решить проблему невозможно. Но,
можно применить CSS-вуду некоторые оптимизации, которые помогут в большинстве случаев.
upd.: После прочтения комментариев и проверки в Firefox (Win, Andr) и Opera (Win), делаю вывод что я ошибался относительно причин. Видимо, они все-таки в Chrome под винду и андроид.


Вариант решения:

for (let img of document.querySelectorAll('.test')) {
  img.addEventListener('mouseenter', function () { this.classList.add('active'); }); 
  img.addEventListener('mouseleave', function () { this.classList.remove('active'); }); 
}
.test {
  transition: filter 0.3s steps(18),
              transform 0.3s ease-out; 
  backface-visibility: hidden !important; 
  transform: translate3d(0, 0, 0) scale(1, 1); 
}
.active {
  filter: blur(10px); 
  transform: translate3d(0, 20px, 0) scale(1, 1); 
}
<img class="test" src="https://picsum.photos/200/150/?image=11">
<img class="test" src="https://picsum.photos/200/150/?image=15">
<img class="test" src="https://picsum.photos/200/150/?image=16">

Данное решение включает в себя (в порядке значимости):

  • ограничение числа кадров перехода, steps(18)
    60кадров/с (лимит браузера) * 0,3с = 18
    Это также делает временную функцию перехода линейной, что сильно ускоряет подсчеты (но это не просто аналог linear, а лучше).

  • отключение отрисовки оборотной стороны элемента через backface-visibility: hidden
    Смысл очевиден: флип не выполняется => нет смысла рендерить оборотку.

  • исключение из пересчета transform трансформации по X и Z, а также масштабирования
    Плюс, translate3d создает новый слой при рендеринге элемента - что, в свою очередь, должно вынудить браузер задействовать GPU не только при размытии.

11
  • ТС, прикладывать минимальный воспроизводимый пример - это ваша задача, а не отвечающих.
    – yar85
    20 мая 2018 в 8:59
  • 1
    очень качественный ответ. Непонятно,почему до сих пор не оценили. (:+) Может воскресенье тому виной 20 мая 2018 в 13:29
  • @Alexandr_TT, спасибо! Оценки-то ладно, а вот если автор вопроса не отметит ответ (что сделает невозможным линковку этого вопроса к дублирующим) - будет обидно, учитывая насколько легко столкнуться с проблемой мигания анимаций и переходов... это ведь "фирменная фича" вебкита :)
    – yar85
    20 мая 2018 в 13:47
  • не стесняйтесь напоминать новичкам о возможности поблагодарить автора ответа. Бывают случаи с новичками, что они серьезно не знали о такой возможности. 20 мая 2018 в 14:02
  • У меня ничего не мигает ни в одном из браузеров, так что я так и не понял, в чём проблема) Подтормаживает в хроме — да, но не мигает (а в Firefox вообще всё гладенько)
    – andreymal
    20 мая 2018 в 14:20

Ваш ответ

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

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