Framer Motion 动效库 Motion
最后更新：2026-10-28
Framer Motion 动效库 Motion
Framer Motion（新包名 motion）是 React 最流行的动效库：用 motion.div 声明初始、目标与过渡参数即可自动补间；AnimatePresence 处理退场动画，支持手势与布局动画。
| 分组 | 生态与进阶 |
|---|---|
| 类型 | 第三方库 |
| 引入版本 | v11（官方新包名 motion，从 motion/react 导入） |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
npm install motion
import { motion, AnimatePresence } from 'motion/react'
<motion.div
initial={{ opacity: 0, y: -20 }} // 初始状态
animate={{ opacity: 1, y: 0 }} // 目标状态
exit={{ opacity: 0 }} // 退场状态（需 AnimatePresence）
transition={{ duration: 0.3, ease: 'easeOut' }} // 过渡配置
>
内容
</motion.div>
// 弹簧物理：<motion.button whileTap={{ scale: 0.9 }} />⚙️ 参数
| initial / animate | 动画的起始与目标样式对象，属性值变化时库自动在两者之间补间。 |
|---|---|
| transition | 过渡配置：时长、缓动曲线，或弹簧物理参数（type: 'spring'、stiffness、damping）。 |
| AnimatePresence | 包裹条件渲染的元素，让组件卸载时先播放 exit 退场动画再移除 DOM。 |
返回值：无返回值，第三方库用法说明见示例。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
模拟演示：点击「打开弹窗」后遮罩 0.3s 淡入，弹窗从上方缩小状态弹至屏幕中央（弹簧感缓动）；点遮罩或「关闭」按钮反向淡出收起。演示「状态驱动 + CSS 过渡」的声明式动画思路，真实 Framer Motion 用 motion.div + AnimatePresence 实现。💡 要点
💡 提示 exit 属性 + AnimatePresence 是处理「弹窗 / 列表项退场」的标准组合，纯 CSS 做不到卸载时动画。
ℹ️ 说明 v11 起官方推出新包 motion，API 基本一致，导入路径改为 motion/react；旧包 framer-motion 仍可继续使用。
⚠️ 注意 同屏动画元素几百个以上时注意性能，优先用 transform/opacity，或考虑 CSS 过渡与 layout 动画范围。
🏷️ 生态与进阶相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q Framer Motion 和 CSS animation 怎么选？
A 简单悬停、淡入用 CSS 即可；需要基于状态编排、退场动画、手势交互、弹簧物理或布局动画时用 Framer Motion，它能直接读 React state。
Q AnimatePresence 是干什么的？
A React 卸载元素时会立刻移除 DOM，CSS 来不及播放退场动画。AnimatePresence 会延迟卸载，让 exit 动画播完再真正移除节点。
Q 新包 motion 和 framer-motion 是什么关系？
A Framer Motion v11 后官方推出独立包 motion，API 兼容，导入改为 motion/react，同时支持 React 与原生 JS；老包继续维护，新项目建议直接用 motion。
