Question

我有这样的代码：

function App() {
  const [first, setFirst] = useState(false)
  const [second, setSecond] = useState(false)

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    gsap.to('.first', {
      scrollTrigger: {
        trigger: '.first',

        start: 'top top+=150',
        markers: { startColor: "green", endColor: "yellow", fontSize: "12px" },
        onEnter: () => {
            setFirst(true)
        }
      }
    })
    gsap.to('.second', {
      scrollTrigger: {
        trigger: '.second',
        start: 'top top+=150',
        markers: { startColor: "green", endColor: "yellow", fontSize: "12px" },
        onEnter: () => {
            setSecond(true)
        }
      }
    })
  })

  return (
    <div>
        <First first={first} />
        <Second second={second} />

    </div>
  );
}

export default App;

组件第一和第二很简单。 UseEffect 钩子看起来像这样

useEffect(() => {
    if(props.first === true){
        //animate
    }
})

我可以激活第一个动画，但如果我激活第二个，第一个动画再次动画。你知道为什么吗？

Answer 1

在 setState 中使用 useEffect 会导致无限循环，特别是如果您没有指定依赖项（第二个参数）。

useEffect 就您使用它的方式而言，无论是什么导致渲染或重新渲染，都会在您的组件渲染后运行。 setState 导致重新渲染并再次触发 useEffect。

我建议您重新构建您的应用程序以在 setFirst(true) 之外运行 setSecond(true) 和 useEffect

或者做这样的事情：

onEnter: () => animation.play(),
onLeave: () => animation.pause(),

或者使用 ScrollTrigger

这是一个使用 React + GSAP 3 的应用程序示例 https://github.com/npinos/cloud-animations-react-gsap

调用多个触发器

1 个答案: