Javascript 如何使用IntersectionObserver使React组件在滚动中淡入，但只淡入一次？

我试图在用户滚动时为组件提供淡入效果，但我希望淡入效果仅在元素第一次移动到视口时发生

目前，我使用的代码在每次元素移动到视口时都会导致淡入淡出，因此它们会不断淡入淡出

这是我的淡入组件：

import React, {useState, useRef, useEffect} from 'react';
import './styles/FadeInSection.css';

export default function FadeInSection(props) {
  const [isVisible, setVisible] = useState(true);

  const domRef = React.useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => setVisible(entry.isIntersecting));
    });

    observer.observe(domRef.current);

    return () => observer.unobserve(domRef.current);
  }, []);

  return (
    <div ref={ domRef } className={ `fade-in-section ${ isVisible ? 'is-visible' : '' }` }>
      { props.children }
    </div>
  )
}

这是我的网站，它不断地淡入淡出组件，提供了一种可怕的体验：

这就是理想的效果：

我怎样才能达到预期的效果

---

这里有一个指向代码沙盒的链接来测试它：

如果

entry，您只需要调用
setVisible
。isIntersecting

是

true

，因此只需替换：

setVisible(entry.isIntersecting);

与：

这样，一旦一个条目被标记为可见，它就不会被取消标记，即使您向上滚动，元素也会离开视口，并且

entry.isIntersecting

再次变为

false

实际上，你甚至可以在那一点上调用

observer.unobserve

，因为你已经不在乎了

const FadeInSection=({
儿童
}) => {
const domRef=React.useRef（）；
常量[isVisible，setVisible]=React.useState（false）；
React.useffect（（）=>{
const observer=新的IntersectionObserver（条目=>{
//在您的情况下，只有一个元素需要观察：
if（条目[0]。isIntersecting）{
//无法将其设置回false，如下所示：
setVisible（真）；
//无需继续观察：
无观测站（domRef.电流）；
}
});
观察者观察（domRef.current）；
return（）=>observer.unobserve（domRef.current）；
}, []);
返回（{children}）；
};
常量App=（）=>{
常量项=[1,2,3,4,5,6,7,8]。映射（编号=>(
第{number}节
));
返回（{items}）；
}
ReactDOM.render（，document.querySelector（'#app'）
正文{
字体系列：monospace；
保证金：0；
}
部分{
填充：16px；
利润率：16px；
盒影：0.08像素rgba（0,0,0,125）；
高度：64px；
不透明度：0；
转换：翻译（0,50%）；
可见性：隐藏；
过渡：不透明度300毫秒减缓，变换300毫秒减缓；
将更改：不透明度、可见性；
}
.可见{
不透明度：1；
转化：无；
能见度：可见；
显示器：flex；
}

我将代码中的setVisible更改为setVisible（prevValue=>prevValue | | entry.isIntersecting），无论出于什么原因，它都停止了淡入效果。组件现在始终在那里，没有淡入。不知道我在做什么wrong@klaurtar1没有更多细节很难说。也许可以尝试将您的代码与上面代码段中的代码进行比较。正如你所看到的，这是有效的。否则，请尝试在问题中发布您当前的代码。谢谢您的帮助。我在原始帖子的底部添加了一个链接，指向一个沙盒，其中包含了工作代码。如果你能看一看，我会很感激的immensely@klaurtar1该代码不起作用，您使用的
FadeInSection
组件
JobList
也不见了。我已经更新了这里的代码，使其与您的代码更接近，并且它仍在工作，因此我怀疑错误可能出现在
作业列表中。另外，请尝试先删除
translateY（20vh）
并仅更新不透明度。翻译元素也会影响
IntersectionObserver
。您有
useState（true）
而不是
useState（false）
和
if（entries.isIntersecting）
而不是
if（entries[0]。isIntersecting）
。此处已修复：。
setVisible(entry.isIntersecting);

entry.isIntersecting && setVisible(true);