Reactjs 在不与元素相交后，如何保持更改？

我正在使用react，我想在视口位于所需元素上时制作一些动画， 但我只想触发它一次，这样当观察值为false时，我的元素样式就不会再次更改为开始

我正在使用样式化组件进行样式化

HomeSection.Projects=函数HomeSectionProjects（{children，…rest}）{
const ref=useRef（null）；
const[isVisible，setVisible]=useState（false）；
常量callbackFn=（条目）=>{
常量[条目]=条目；
setVisible（输入。isIntersecting）；
};
useffect（（）=>{
常量选项={
root:null，
rootMargin:“0px”，
阈值：1，
};
const observer=新的IntersectionObserver（callbackn，options）；
如果（参考电流）观察者观察（参考电流）；
}，[ref]）；
返回{children}；
};一旦元素可见，就可以停止观察它。另外，您的
callbackFn
不必位于函数体的外部

useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 1,
    };

   const callbackFn = (entries) => {
    const [entry] = entries;
    if(entry.isIntersecting)
    {
    setVisible(true);
    observer.unobserve(entry.target);
    }
  };

    const observer = new IntersectionObserver(callbackFn, options);
    if (ref.current) observer.observe(ref.current);

  }, [ref]);