Завершить анимацию до конца
.vlm { transition: width .2s 1.5s; width:0;}
.vlm:hover,
#test:hover + .vlm {transition: width .2s .3s; width: clamp(40px, 7%, 140px)}
Столкнулся с тем, что анимация не проигрывается до конца.
Когда курсор попадает на #test:hover + .vlm начинается анимация с небольшой задержкой
transition: width .2s .3s;. Если курсор увести на половине, скажем на .1s из .2s.
Тогда анимация зависнет на половине, актуальным станет свойство свойство
transition: width .2s 1.5s. То есть зависнет на полторы секунды...
Как сделать, чтобы анимация даже если курсор будет уведен до окончания. Проигралась до конца?
Ответы (1 шт):
При помощи CSS - ни как. При помощи JS+CSS - Создаете класс .effect с вашими анимациями на свойство animation. После цепляете по наведению данный класс на исполняемый объект с условием, что пока не пройдет определенное время ничего друго-го с этим объектом сделать нельзя. Когда это время выполнения отработаете удаляете класс или заменяете на нужное состояние. Это гарантирует ограничение выполнения оперции при выходе курсора из области видимости элемента.