从 CSS 到 Framer Motion：React 过渡动画全攻略

一、React 过渡动画：提升用户体验的「隐形魔法」

1.1 为什么需要过渡动画？

在 React 应用中，过渡动画不仅能让界面切换更丝滑，还能通过视觉反馈引导用户注意力。比如列表项的增减、模态框的弹出消失，合理的动画能减少用户的「界面跳跃感」，让交互更自然～

1.2 常见实现方案对比

方案	优势	适用场景	学习成本
CSS 原生	轻量、浏览器原生支持	简单的入场 / 离场动画	★☆☆☆☆
react-transition-group	组件化控制、状态管理友好	复杂状态切换动画	★★☆☆☆
Framer Motion	声明式 API、高性能	复杂交互动画、3D 变换	★★★☆☆

二、CSS 过渡：从基础到「避坑指南」

2.1 原生 CSS 实现简单入场动画

css 复制代码

/* 基础样式：隐藏内容 */
.box {
  width: 100px;
  height: 0; /* 初始高度为 0，内容隐藏 */
  background-color: lightblue;
  transition: height 0.3s ease; /* 监听 height 变化，0.3s 缓动 */
  overflow: hidden; /* 隐藏溢出内容，避免内容跳动 */
}

/* 激活样式：展开内容 */
.box.open { /* 修正原内容中类名拼写错误 `.o.boxpen` 为 `.box.open` */
  height: 100px;
}

核心原理 ：通过 CSS transition 属性监听目标样式（如 height、opacity）的变化，浏览器自动生成中间帧动画
注意点：需提前定义初始 / 结束样式，且过渡属性必须是「可动画化」的 CSS 属性（如 width、transform 等，不支持 display 等）

2.2 实战：点击展开 / 收缩组件

jsx 复制代码

// Box 组件：通过状态控制类名切换
import { useState } from 'react';

function Box() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div 
      className={`box ${isOpen ? 'open' : ''}`}
      onClick={() => setIsOpen(!isOpen)}
    >
      点击展开～
    </div>
  );
}

交互逻辑 ：点击时切换 isOpen 状态，动态添加 / 移除 .open 类
优化点 ：配合 overflow: hidden 避免内容渲染时的「闪现问题」

三、Framer Motion：声明式动画的「降维打击」

3.1 快速上手：从安装到第一个动效

bash 复制代码

pnpm i framer-motion # 安装库

jsx 复制代码

// MotionBox 组件：使用 motion 组件创建入场动画
import { motion } from 'framer-motion';

const MotionBox = () => {
  return (
    <motion.div 
      initial={{ opacity: 0, y: -50 }} // 初始状态：透明度 0，向上偏移 50px
      animate={{ opacity: 1, y: 0 }} // 激活状态：完全显示，回到原位
      transition={{ duration: 0.5 }} // 过渡配置：总时长 0.5 秒
      style={{ background: 'skyblue', padding: 20 }}
    >
      <h2>Motion Box</h2>
    </motion.div>
  );
};

核心优势 ：无需手动操作 DOM，通过 initial/animate 声明状态，Framer Motion 自动处理中间过渡
底层原理 ：基于 requestAnimationFrame 和 GPU 加速，性能优于传统 JS 动画

3.2 进阶技巧：变体（Variants）与组动画

jsx 复制代码

// 定义多个动画状态变体
const boxVariants = {
  hidden: { opacity: 0, x: -100 }, // 隐藏状态：向左偏移 100px
  show: { 
    opacity: 1, 
    x: 0, 
    transition: { 
      type: 'spring', // 弹簧动画
      stiffness: 100, // 弹性系数
      damping: 15 // 阻尼系数
    }
  }
};

function VariantExample() {
  const [isVisible, setIsVisible] = useState(false);
  return (
    <motion.div
      variants={boxVariants}
      initial="hidden" // 初始应用 hidden 变体
      animate={isVisible ? "show" : "hidden"} // 根据状态切换变体
    >
      弹性入场的神奇盒子～
    </motion.div>
  );
}

变体优势：复杂动画配置可复用，支持弹簧、缓动等高级过渡效果
最佳实践 ：列表动画可通过 custom 属性传递索引，实现延迟动画（如列表项依次入场）

四、项目实战：混合使用 CSS 与 Framer Motion

4.1 App 组件架构设计

jsx 复制代码

// App 组件：组合不同动画组件
import { useState } from 'react';
import './App.css';
import Box from './components/Box'; // CSS 过渡组件
import MotionBox from './components/MotionBox'; // Framer Motion 组件

function App() {
  return (
    <>
      <Box /> {/* CSS 实现的展开/收缩盒子 */}
      <MotionBox /> {/* Framer Motion 实现的滑动入场盒子 */}
    </>
  );
}

技术选型建议：简单状态切换用 CSS，复杂交互动画（如拖拽、3D 变换）用 Framer Motion
性能优化 ：避免过度动画，对频繁更新的组件使用 transform/opacity 等 GPU 友好属性

五、避坑指南与最佳实践

5.1 常见错误与解决方案

CSS 类名拼写错误 ：检查过渡类名是否与 JS 动态添加的类名一致（如原内容中的 .o.boxpen 应为 .box.open）
动画闪跳问题：确保初始状态和结束状态的样式完整，避免中间帧计算错误
性能瓶颈 ：避免对 width/height 等触发回流的属性做高频动画，改用 transform

5.2 小贴士

代码可读性 ：复杂动画配置抽成独立变量（如 boxVariants），避免组件内逻辑冗余
用户体验：动画时长建议控制在 0.3-0.5 秒，过长会让用户感到卡顿，过短则失去视觉反馈意义
兼容性：Framer Motion 支持现代浏览器，IE 需额外 polyfill，传统项目可先用 react-transition-group

六、总结：选择适合你的动画方案

新手入门：从 CSS 过渡开始，掌握基础动画原理
项目提效：复杂状态管理选 react-transition-group，享受组件化控制的便利
极致体验：Framer Motion 适合追求高性能、声明式语法的团队，轻松实现「交互动画自由」

通过合理组合不同方案，我们能让 React 应用不仅功能强大，还能在视觉交互上给用户带来惊喜～现在就动手试试吧，让你的组件「动」起来！