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

Question

[Leeroyka]

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



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

Видео с багом

https://www.youtube.com/watch?v=B02N4nMcryY

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

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

Comments

[Владислав Черненко]

а собственно зачем? тут одним css в 2 строки можно обойтись

Answer 1

[RAX7]

Это баг самой библиотеки, не получается у нее нормально распарсить значения filter: drop-shadow.
Исправить можно сделав анимацию в объект с последующим обновлением свойств самого элемента.

Answer 2

[Дмитрий Марков]

А зачем для добавления тени блоку использовать целую либу?
Сделайте hover на css

Comments

[Leeroyka]

Согласен с этим, но вчера мне резко приспичило переделать с обычного :hover на anime.js, чтобы попробовать новую технологию, а сейчас уже как то жалко назад переделывать после того, как несколько часов ради мелкой анимации провозился)