reactjs - 在视口中使用 FramerMotion useTransform Animation

Question

我正在尝试使用帧运动和反应交叉观察者来设置一些基于滚动的动画。我想在滚动到视图时对同一页面上的不同部分使用相同的动画。我可以让 intersection-observer 与一些基本动画一起正常工作，但我不确定如何让它与 useTransform 一起工作。这是一个 CodeSandBox，它应该更好地解释我所追求的，以及我哪里出错了。任何帮助将不胜感激。

https://codesandbox.io/s/motionintersect-25wz9?file=/src/App.js:449-504

Answer 1

是的，你做得很好，分离组件。

但这里是示例，清楚地描述了您最需要的内容。

我的建议，对于你弄乱一些东西的组件animation和transition. 尝试在 useTransform 时使用useCycle framer-motion 元素。红盒示例：

//define this animate const somewhere
const [animate, cycle] = useCycle(
  { scale: .5, opacity: 0 },
  { scale: 1.0, opacity: 1 }
 );

 //modify your component
 <Redbox
   ref={ref}
   animate={animate}
   transition={{ duration: 1 }}
  ></Redbox>

按照这个小示例，您可以使用完全相同的动画，但可以修改每个组件的持续时间。

我还建议您尝试AnimatePresence元素。