交叉口观察者 - 离开视口后如何删除类答案

【问题标题】：Intersection observer - How do you remove a class after leaving the view port交叉口观察者 - 离开视口后如何删除类
【发布时间】：2022-01-23 08:42:09
【问题描述】：

当 div 使用 Intersection Observer 进入视口时，我正在添加一个类。当 div 离开视口时，我只是不知道如何删除类。这是我目前所拥有的：

const callback = function (entries) {
    entries.forEach(entry => {
        if(entry.isIntersecting)
        {
            entry.target.classList.add('animate1');
          observer.unobserve(entry.target)
          }
    });
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.overlay');
targets.forEach(target => {
    observer.observe(target);
})

【问题讨论】：

两件事：1. 你不能.unobserve() 并期望有另一个观察来确定是否不再有交叉点。 2. 你只需要一个 else 并删除那里的类。

标签： javascript intersection-observer

【解决方案1】：

感谢您对兰迪的帮助。我确实让它工作了。这是最终代码：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('animate1');
    }
    else {
      entry.target.classList.remove('animate1');
    }
  })
})
const boxElList = document.querySelectorAll('.overlay');
boxElList.forEach((el) => {
  observer.observe(el);
})

【讨论】：