У меня есть анимация, прописанная в CSS:
@keyframes slideIn {
from { width: 0px; }
to { width: 40px; }
}
После того, как я увожу курсор с элемента, должна производиться другая анимация:
@keyframes slideOut {
from { width: 40px; }
to { width: 0px; }
}
Но, я не понимаю, как её присвоить элементу. Точнее, запустить анимацию на этом элементе. Вот код JS:
let navBtn = document.querySelectorAll(".nav_link");
for (let i = 0; i < navBtn.length; i++) {
console.log(navBtn[i]);
navBtn[i].addEventListener('mouseenter', (e) => {
let ellement = navBtn[i];
console.log("Элемент с нуммерацией: " + i + " , а так же элементом: " + ellement);
ellement.classList.add('active');
ellement.addEventListener('pointerout', (b) => {
if (ellement.classList.contains("active")) {
console.log("Да, он актив, и ты вышел из объекта");
}
setTimeout((b) => {
}, 1600);
});
});
}
Вот CSS того элемента, на который будет распространяться анимация:
.nav_link {
position: relative;
}
.nav_link:hover::before {
content: "";
position: absolute;
width: 40px;
height: 2px;
background-color: rgb(255, 255, 255);
bottom: 0;
left: 0;
animation-duration: .8s;
animation-name: slideIn;
}
Добавил класс, всё хорошо работает, но теперь нужно как-то разобраться с удалением класса active
, так как даже, если я ставлю setTimeout
, то все равно класс сразу удаляется после увода, поэтому хотел бы услышать исправление!
Заранее благодарен!