当元素在视图中时（例如，当我们滚动到元素时），是否有任何内置方法可以使动画开始？
Framer Motion有安装动画部分，其中说：
当组件安装时，如果它们与样式或初始值中定义的值不同，它会自动为 animate 中的值设置动画
所以我真的找不到一种直接的方法来让动画在出现时开始。
但是，我现在看到的唯一选项是使用动画控件，这意味着我必须手动在滚动上实现侦听器并触发control.start()，任何更简单的方法都非常感谢。
当元素在视图中时，Framer 运动动画（当你滚动到元素时）
IT技术
javascript
reactjs
animation
framer-motion
2021-04-28 18:19:41
1个回答
framer-motion 自 5.3 版起已内置对此用例的支持。
这是一个演示该模式的 CodeSandbox：https ://codesandbox.io/s/framer-motion-animate-in-view-5-3-94j13
相关代码：
function FadeInWhenVisible({ children }) {
return (
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.3 }}
variants={{
visible: { opacity: 1, scale: 1 },
hidden: { opacity: 0, scale: 0 }
}}
>
{children}
</motion.div>
);
}
用法：
<FadeInWhenVisible>
<Box />
</FadeInWhenVisible>
之前的版本：
您目前可以使用命令式动画控件来实现此效果。相交观察器可用于检测元素当前是否可见。
这是一个演示该模式的 CodeSandbox：https ://codesandbox.io/s/framer-motion-animate-in-view-gqcc8 。
相关代码：
function FadeInWhenVisible({ children }) {
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
if (inView) {
controls.start("visible");
}
}, [controls, inView]);
return (
<motion.div
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: 0.3 }}
variants={{
visible: { opacity: 1, scale: 1 },
hidden: { opacity: 0, scale: 0 }
}}
>
{children}
</motion.div>
);
}