用 Framer Motion 实现布局动画…

在 React 中用 Framer Motion 的 layout、layoutId 和 AnimatePresence 实现共享元素过渡、列表重排与退出动画。

适用场景

解决思路

1. 用 `layout` prop 开启布局变化时的自动位置动画：在父容器和子项上分别给 `motion` 组件加 `layout`，子项必须有稳定 `key`。
2. 按需要选择布局模式：`layout={true}` 同时动画位置和大小，`layout="position"` 只动画位置，`layout="size"` 只动画大小。
3. 用 `layoutId` 做不同组件/页面之间的共享元素过渡；当带相同 `layoutId` 的元素从 A 卸载、B 挂载时，Framer Motion 会平滑动画到新位置。
4. 页面过渡时，在不同页面组件中给对应元素设置相同 `layoutId`，例如 `<motion.div layoutId="card" />`。
5. 模态覆盖层中，列表项和 Modal 使用相同的动态 `layoutId`，例如 `layoutId={`item-${item.id}`}`。
6. 用 `AnimatePresence` 包裹会条件渲染或从列表移除的动画组件，并在内部 `motion` 组件上定义 `exit` 状态以启用退出动画。
7. 根据编排需要选择 `AnimatePresence mode`：`"sync"` 为默认，所有动画同时运行；`"wait"` 等退出完成后再进入；`"popLayout"` 让退出元素立即从布局中移除。
8. 实现可重排列表时，将 `layout` 与 `drag` 结合：子项设置 `key`、`drag`、`dragConstraints`，在 `onDragEnd` 中根据 `info` 和 `target` 计算新索引并更新列表，同时配置 `initial`、`animate`、`exit`。
9. 实现网格共享布局时，父容器使用 `layout` 并设置 `display: "grid"`、`gridTemplateColumns`、`gap` 等样式；子项使用 `layout`、稳定 `key`，并设置宽高/比例/背景等样式。
10. 为 AnimatePresence 内的元素定义退出状态，例如 `initial={{ opacity: 0, scale: 0 }}`、`animate={{ opacity: 1, scale: 1 }}`、`exit={{ opacity: 0, scale: 0 }}`。
11. 在带 `layout` 的元素上也可以定义 `exit`，例如 `exit={{ opacity: 0, x: -100, transition: { duration: 0.3 } }}`。
12. 做同层级交叉淡入淡出/形变时，用 `AnimatePresence mode="popLayout"`，让不同状态下渲染的元素共享同一个 `layoutId`，可平滑 morph 包括 `borderRadius`。
13. 最佳实践：路由/页面间共享元素过渡优先使用 `layoutId`。
14. 最佳实践：动画列表用 `AnimatePresence` 包裹以支持退出动画。
15. 最佳实践：需要自动位置动画时使用 `layout` prop。
16. 最佳实践：平滑重排使用 `AnimatePresence mode="popLayout"`。
17. 最佳实践：使用 `AnimatePresence` 的组件必须定义 `exit` 状态。
18. 最佳实践：当子项需要动画位置时，在父容器上也使用 `layout`。
19. 不要在条件渲染的动画组件外漏掉 `AnimatePresence`。
20. 不要在同一层级的多个元素上使用相同 `layoutId`。
21. 不要忘记为会卸载的组件定义 `exit` 状态。
22. 不要在子项缺少正确 `key` 时使用 layout 动画。
23. 不要同时动画过多 layout 元素；应分组或错峰处理。

适用边界 · 注意事项

• 未使用 React/Framer Motion 或不能引入该库的项目不适用。
• 不需要布局变化、共享元素过渡或进出场动画的静态 UI 不适用。
• 同时对大量布局元素做动画且性能极敏感时，应避免或先分组/错峰。