交叉点观察者页面上已经存在的动画元素偶尔会起作用答案

【问题标题】：Intersection observer Animated elements already on page sporadically working交叉点观察者页面上已经存在的动画元素偶尔会起作用
【发布时间】：2022-01-18 13:29:26
【问题描述】：

我正在尝试使用交叉点观察器为元素设置动画，但页面加载时屏幕上已经出现的元素出现了奇怪的行为。

它们随机地有时正确地动画，而有时则不正确。

const faders = document.querySelectorAll('.fade-in');
const sliders = document.querySelectorAll('.slide-in');

const appearOptions = {
    threshold: 0,
    rootMargin: "0px 0px -200px"
};

const appearOnScroll = new IntersectionObserver((entries, appearOnScroll) => {

    entries.forEach(entry =>{

        
        if (!entry.isIntersecting){
            return
        }

        else{
            entry.target.classList.add("appear");
            appearOnScroll.unobserve(entry.target);
        }
    })
}, appearOptions);



faders.forEach(fader => {
    appearOnScroll.observe(fader);
});

sliders.forEach(slider => {
    appearOnScroll.observe(slider);
});

【问题讨论】：

标签： javascript frontend intersection-observer

【解决方案1】：

好吧，事实证明，这个问题只发生在开发工具在 chrome 浏览器中打开时。

如果 devtools 关闭，动画将始终如一地工作！

【讨论】：

Return 不会中断 forEach。不确定是什么行为。