为什么 IntersectionObserver 不应用这些类？

Question

我正在关注有关 IntersectionObserver 的教程，但我似乎无法让它工作......我正在尝试对视口中可见的元素应用动画。我将在此处粘贴 JS 代码，此处包含 html 和 css 的完整示例：https://codepen.io/cucurutcho/pen/KKWRrov

    const images = document.querySelectorAll('.anim');

    console.log("I'm working!");

    observer = new IntersectionObserver((entries) => {

        entries.forEach(entry => {
          console.log("I'm working 2!");
            if(entry.intersectionRatio > 0) {
                entry.target.style.animation = `fadeInUp animated animatedFadeInUp`;
            }
            else {
                entry.target.style.animation = 'none';
            }
        })

    })

    images.forEach(image => {
      console.log("I'm working 3!")
        observer.observe(image)
    })

    

非常感谢任何帮助！非常感谢大家

Answer 1

您不是针对类，而是在覆盖 CSS animation 属性的文本内容，如 here 所述。

你需要 classList 代替：

if (entry.intersectionRatio > 0) {
  entry.target.classList.add("fadeInUp", "animated", "animatedFadeInUp")
} else {
  entry.target.classList.remove("fadeInUp", "animated", "animatedFadeInUp")
}