0

У меня есть анимация, прописанная в 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, то все равно класс сразу удаляется после увода, поэтому хотел бы услышать исправление! Заранее благодарен!

1
  • Знаю что можно через добавления классов, но не хочу делать все циклами, хотелось бы вариант попроще
    – ioriSempai
    14 фев 2021 в 8:09

1 ответ 1

0
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', () => {
    if (ellement.classList.contains("active")) {
        console.log("Да, он актив, и ты вышел из объекта");
    }
    function deleteClasses() {
        if (ellement.classList.contains("active")){
            ellement.classList.remove("active");
        }
    }
    setTimeout(deleteClasses, 750);
  });

});  

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.