动画与交互

Motion

为 React 界面加入细顺的进入、布局与手势动画。

访问官网 GitHub

简介

原 Framer Motion 团队维护的动画库，提供声明式动画、布局过渡、手势与弹簧物理，适合把界面状态变化表达成自然的运动。

安装

npm install motion

命令用于快速开始，具体版本与配置请以官方文档为准。

适用场景

为卡片和列表加入进入退出动画
在布局变化时保持元素连贯
实现拖拽和手势驱动的界面反馈

特点

声明式 API 与 React 状态自然衔接
布局动画可减少手工计算位置
弹簧与手势能力适合精细交互

专属示例

真实运行

共享布局过渡

用 Motion 的 layoutId 让同一个元素在两个容器之间连续变形，过渡期间由 Motion 接管真实布局计算。