为什么 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")
}

为什么 IntersectionObserver 没有应用类？

Why IntersectionObserver is not applying the classes?

html

javascript

css

intersection-observer

为什么 IntersectionObserver 没有应用 类？

Why IntersectionObserver is not applying the classes?

html

javascript

css

intersection-observer

为什么 IntersectionObserver 没有应用类？