javascript - 当元素在视图中时 Framer 运动动画(当您滚动到元素时)
问题描述
当元素在视图中时(例如,当我们滚动到元素时),是否有任何内置方法可以使动画开始?
Framer Motion有安装动画部分,其中说:
当组件挂载时,如果它们与 style 或 initial 中定义的值不同,它将自动动画到 animate 中的值
所以我真的找不到一个直接的方法来让动画在它出现时开始。
但是,我现在看到的唯一选项是使用动画控件,这意味着我必须手动在滚动上实现一个侦听器并触发control.start()
,非常感谢任何更简单的方法。
解决方案
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>
);
}
推荐阅读
- python - 在 PyYAML 的构造函数中接受锚点(别名)
- php - 将 Laravel 连接到 XAMPP MySQL (MariaDB) 数据库 SQLSTATE[HY000] [2006] MySQL 服务器已消失
- reactjs - 元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型“{...}”
- android - API 级别 26 以下的 NDK 和 SDK 之间的共享内存
- c - Makefile: Separated sources and objects
- laravel - How to assert that Laravel Controller returns view with proper data?
- laravel - 如何覆盖 Laravel 5.8 尝试方法?
- xml - 代号一创建xml
- python - 如何从 Python 脚本中触发气流 DAG 运行?
- node.js - 如何使我的代码生成令牌并将其返回以对用户进行身份验证?