Zheleznov
@Zheleznov

Как исправить длительности анимации svg в js?

Привет всем

Сделал анимированную иконку svg в js , при наведении на красный блок добавляются классы с анимацией, если убрать курсор классы удаляются.

Проблема в том, что длительность анимации примерно 2.8 сек,
если курсор навести и сразу убрать, то анимация не успевает закончиться.

Если в a.onmouseover = setTimeout( function(e) { ... }, 4000)
Анимация заканчивается и после того как убрать курсор, но классы не удаляются...

Помогите пожалуйста решить проблемку:
1) надо сделать так, чтобы классы удалялись после того, как убрали курсор, но и при этом чтобы анимация успела закончиться
2) Как сделать чтобы при наведении на блок, иконка не выводилась сразу, а выводилась постепенно? с отрисовкой анимации

https://codepen.io/Zhelezniy/pen/KKmPrpJ
  • Вопрос задан
  • 38 просмотров
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
Есть дополнение такое - lazyLinePainter и вот так я с его помощью накостылил: https://codepen.io/topicstarter/pen/xxdKemy

Что бы сделать по своему надо в область где стрелка перетащить свой svg файл - отредактировать задержки и саму анимацию и скачать zip
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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