Почему при наведении добавляется класс?

Question

[Михаил Размыслович]

Здравствуйте, делал анимации с помощью Intersection Observer, все появляется, но столкнулся с проблемой, если навожусь на этот элемент к нему назад добавляется этот класс.

/* появление элементов при скроле секция 4 */
const callbackElemSection4Card1 = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        document.querySelector('#section-fourth__card_1').classList.remove("opasity-0")
      }
      else{
        document.querySelector('#section-fourth__card_1').classList.add("opasity-0")
      }
    })
  }
  
let options = {
    rootMargin: "0px",
    threshold: 1.0,
};

let observerElemSection4Card1 = new IntersectionObserver(callbackElemSection4Card1, options);

let targetElemSection4Card1 = document.querySelector("#section-fourth__card_1");
observerElemSection4Card1.observe(targetElemSection4Card1);

Comments

[Сергей delphinpro]

в этом коде нет проблемы

Answer 1

[szQocks]

ну не добавляй этот класс, сделай так что бы этот класс изначально был на элементе, и просто убирай его когда доходишь до элемента, можно ещё вообще после первого срабатывания условия if, отключать обсервер у текущего элемента

Comments

[Михаил Размыслович]

у меня он как раз и удаляется

[szQocks]

Михаил Размыслович, в текущем коде нет проблем, ищи в другом месте

[szQocks]

Михаил Размыслович, или просто опиши как оно должно работать я скажу что тут не так

[Михаил Размыслович]

szQocks, Пользователь скролит сайт и когда доходит до опред предмета у него удаляется класс, но у этого элемента есть еще :hover и когда на него наводишься ховер срабатывает, но еще добавляется тот класс который удаляется когда елемент входит в границы экрана

[szQocks]

Михаил Размыслович, хм, либо классы должна быть разные, либо отключай отслеживание у элемента

как видишь коллбэк вторым параметром принимает observer у этого обсервера есть метод для отмены отслеживания элемента, если не ошибаюсь то юзается так observer.unobserve(entry) , это добавляешь в условии первом - и всё будет работать так как ты ожидаешь

[szQocks]

Михаил Размыслович,

/* появление элементов при скроле секция 4 */
const callbackElemSection4Card1 = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        document.querySelector('#section-fourth__card_1').classList.remove("opasity-0")
        observer.unobserve(entry.target)
      }
    })
  }
  
let options = {
    rootMargin: "0px",
    threshold: 1.0,
};

let observerElemSection4Card1 = new IntersectionObserver(callbackElemSection4Card1, options);

let targetElemSection4Card1 = document.querySelector("#section-fourth__card_1");
observerElemSection4Card1.observe(targetElemSection4Card1);

[imko]

А элемент этот при ховере случайно за экран не улетает?)

[szQocks]

imko, без понятия, вроде бы нет

Answer 2

[cryptoUser]

Попробуй отключить наблюдатель после появления элемента
observer.unobserve(entry.target);