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

Posted 2023-05-08

【中文标题】交叉点观察者 页面上已经存在的动画元素偶尔会起作用

【英文标题】：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);
);

【参考方案1】：

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

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

【讨论】：

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