我要招人

前端/移动开发面试题更新 2026-08-05

在 React 应用中，有哪些常用的方法或技术方案可以用来实现组件之间的过渡动画效果？

前端/移动开发技术原理技术选型React

考察说明

考查对 React 中实现过渡动画的常用方案及其原理的理解。

回答思路

  1. 【回答框架 1】React 实现过渡动画的常见方案主要包括 CSS 过渡/动画、React Transition Group 库以及 framer-motion 等高级动画库。CSS 方案通过添加/移除类名来触发过渡或动画，控制 opacity、transform 等属性，适用于简单场景。
  2. 【回答框架 2】React Transition Group 提供了 Transition、CSSTransition 和 TransitionGroup 组件，能够管理组件挂载/卸载的动画状态，基于生命周期钩子或 CSS 类切换实现平滑的进入和退出效果，适合列表增删等场景。
  3. 【回答框架 3】framer-motion 通过 motion 组件和 AnimatePresence 提供声明式 API，支持复杂手势动画和布局动画，内部使用弹簧或时间函数，能方便地处理组件切换和共享布局过渡。
  4. 【回答框架 4】选择方案时依据项目复杂度与需求：简单动画用 CSS 即可；涉及条件渲染和列表变化用 Transition Group；需要高性能和复杂交互则选择 framer-motion。实际项目中常结合 CSS 变量和媒体查询优化性能。
  5. 【回答框架 5】无论哪种方案，均需注意动画性能（避免重排、使用 transform 和 opacity）及可访问性（尊重 prefers-reduced-motion）。
  6. 【关键点 1】CSS 类切换适用于简单过渡，React 负责条件渲染类名。
  7. 【关键点 2】React Transition Group 基于生命周期管理进入/退出状态。
  8. 【关键点 3】framer-motion 的 AnimatePresence 处理组件卸载动画。
  9. 【关键点 4】实际方案选择依据动画复杂度和项目体积。
  10. 【关键点 5】动画性能优先 transform 与 opacity，并考虑减少动画偏好。
  11. 【易错点 1】直接卸载组件而不使用 AnimatePresence 等工具会导致退出动画缺失。
  12. 【易错点 2】CSS transition 对 display:none 不可用，需结合其他属性或组件状态。
  13. 【易错点 3】过度使用复杂动画库可能增加包体积和渲染开销。