leeroykahikki
@leeroykahikki

Как исправить баг анимации при резком прерывании Anime JS?

Есть элементы с классом cards-item, которым нужно сделать анимированный hover. Делаю я это при помощи обработки событий "mouseenter" и "mouseleave", а сами анимации накладываю при помощи библиотеки anime.js



Если воспроизводить анимацию туда и обратно, то всё работает нормально, но если затригеррить анимацию mouseleave и вернуть мышку на элемент (т.е. затриггерить mouseenter) до того, как закончиться анимация mouseleave, то анимация не пройдёт плавно, как должна, а резко запаузиться на секунду, а потом поставит конечные значения анимации.

Смотря на инструменты разработчика, можно увидеть, что во время этого бага анимация заднего фона работает нормально, а вот анимация тени зависает и под конец резко выставляет конечные значения.

Как это можно исправить?
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
RAX7
@RAX7
Это баг самой библиотеки, не получается у нее нормально распарсить значения filter: drop-shadow.
Исправить можно сделав анимацию в объект с последующим обновлением свойств самого элемента.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
А зачем для добавления тени блоку использовать целую либу?
Сделайте hover на css
Ответ написан
Ваш ответ на вопрос

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

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