工具条目首选
Motion
React 里最常用的动画库：用声明式的属性写进入、退出、布局变化和手势动画。
- 最后审阅
- 适用版本
- Motion 14
适合
- 元素进入与离开、列表重排、布局变化、拖拽和手势
- 想让界面“有手感”，但不想手写时间轴和插值的 React 项目
- 需要统一处理“减少动态效果”偏好的项目
不适合
- 简单的悬停、颜色过渡（一行 CSS transition 就够了）
- 复杂的时间轴编排和滚动叙事（可以考虑专门的时间轴动画库）
Motion（前身是 Framer Motion）让你把动画写成组件属性：initial 是起点，animate 是终点，exit 是离开时的样子。它负责插值、弹簧物理和中途打断，你只描述状态。
为什么是首选
- 声明式，AI 写得准。 动画就是几个属性，AI 很少写错；比起手写
requestAnimationFrame，可读性也高得多。 - 离开动画和布局动画。
AnimatePresence让元素在卸载前播完离开动画；layout属性让元素在位置或尺寸变化时平滑过渡——这两样用 CSS 很难做好。 - 默认就用合适的物理。 弹簧动画可以被中途打断而不跳变，交互感更自然。
- 尊重用户设置。 用
MotionConfig的reducedMotion="user"就能跟随系统的“减少动态效果”偏好。
上手
pnpm add motion
import { motion } from 'motion/react';
export function Toast({ message }: { message: string }) {
return (
<motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}>
{message}
</motion.div>
);
}
需要知道的取舍
动画不是越多越好。给 AI 立规矩（见纪念品）：只动画 transform 和 opacity、时长保持短、每个动画都要有目的。
纪念品
带走给你的 AI
把这份 AGENTS.md 放进项目，或直接粘贴给 AI 编程助手。
# AGENTS.md（动效部分）
## 工具
- 进入 / 离开 / 布局 / 手势动画用 Motion（`import { motion } from 'motion/react'`）。
- 简单的悬停和颜色变化用 CSS transition，不引入 Motion。
## 规则
- 只动画 `transform`（位移、缩放、旋转）和 `opacity`；不要动画宽高、边距、`top/left`。
- 界面反馈类动画时长 150–300ms；不要让用户等动画结束才能操作。
- 每个动画都要有目的：说明状态变化、引导注意力或表达空间关系。不确定时就不加。
- 在应用根部包一层 `<MotionConfig reducedMotion="user">`，跟随系统“减少动态效果”偏好。
- 列表项的离开动画放在 `<AnimatePresence>` 里，并给每项稳定的 `key`。