当你在 react-spring 中滚动时,如何启动块的动画?

How do I start the animation of a block when you scrolled through it in react-spring?

当你在 react-spring 中滚动一个块时,我如何启动它的动画?

我喜欢将 Waypoint 用于此应用程序。它是一个组件,您可以将其放置在页面的任何位置。例如到顶部、中间或底部。通常我把它放在我想用它控制的组件之前或之后。它可以在进入页面或离开页面时触发事件。你所能做的就是从这些事件中控制你的 react-spring 动画。例如:

  <Waypoint
    onEnter={() => setScale(true)}
    onLeave={() => setScale(false)}
  />

这是一个小例子:https://codesandbox.io/s/website-logo-animation-with-react-spring-gcqhr