React动画实现全攻略：从CSS Transition到Framer Motion

一、 为什么React动画值得你花时间？

想象一下，你正在使用一个App，点击按钮后，新内容“唰”地一下直接蹦出来，没有任何过渡。是不是感觉有点生硬，甚至有点卡顿的错觉？相反，如果内容能平滑地滑入、淡出，整个体验就会变得流畅而舒适。这就是动画的魅力——它不仅仅是装饰，更是提升用户体验、引导用户注意力、让界面充满生命力的关键。

在React的世界里，实现动画有很多条路可以走。从最基础的CSS，到功能强大的专用库，选择很多，但各有千秋。今天，我们就来一起走一遍这条“升级打怪”之路，从最简单的开始，一直讲到最强大的工具，让你彻底搞懂React动画该怎么玩。

二、 基本功：用CSS Transition实现简单动画

这是最直接、性能也通常最好的方法。原理很简单：你定义元素的初始样式和结束样式，然后告诉浏览器，当样式变化时，不要瞬间切换，而是用一段过渡时间来完成。React组件状态（state）的变化，恰好可以触发样式的改变。

技术栈：React + CSS

让我们实现一个简单的展开/收起面板。

// 示例1: 使用CSS Transition的展开收起面板
import React, { useState } from 'react';
// 引入我们写好的CSS样式
import './Panel.css';

function CssTransitionPanel() {
  // 用一个状态来控制面板是展开还是收起
  const [isExpanded, setIsExpanded] = useState(false);

  // 点击按钮时，切换这个状态
  const togglePanel = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="panel-container">
      <button onClick={togglePanel}>
        {isExpanded ? '收起面板' : '展开面板'}
      </button>
      {/* 
        核心在这里：`panel-content` 的 `max-height` 和 `opacity` 会根据
        `isExpanded` 状态，被动态添加或移除 `expanded` 这个CSS类名。
        CSS会处理中间的过渡动画。
      */}
      <div className={`panel-content ${isExpanded ? 'expanded' : ''}`}>
        <p>这里是面板的内容。</p>
        <p>当状态改变时，CSS Transition会让高度和透明度平滑变化。</p>
      </div>
    </div>
  );
}

export default CssTransitionPanel;

配套的CSS文件 (Panel.css)：

/* 面板内容区域的基础样式 */
.panel-content {
  /* 初始状态：收起 */
  max-height: 0;           /* 高度为0 */
  opacity: 0;              /* 完全透明 */
  overflow: hidden;        /* 隐藏溢出的内容 */
  background-color: #f0f0f0;
  padding: 0 1rem;
  border-radius: 4px;
  
  /* 这才是动画的灵魂！定义哪些属性变化时需要过渡，以及过渡的时间曲线和时长 */
  transition: all 0.3s ease-in-out;
  /* 意思就是：所有(all)样式变化，都用0.3秒，以“慢入慢出”(ease-in-out)的方式完成 */
}

/* 展开状态下的样式 */
.panel-content.expanded {
  max-height: 200px; /* 设定一个足够大的最大高度（实际高度由内容决定） */
  opacity: 1;        /* 完全不透明 */
  padding: 1rem;     /* 增加内边距 */
}

应用场景与优缺点：

• 场景：简单的状态切换动画，如显示/隐藏、颜色变化、大小变化。非常适合那些“非此即彼”的两种状态间的过渡。
• 优点：性能极佳（浏览器原生支持），简单易学，不需要额外JavaScript库。
• 缺点：对动画的控制力较弱（比如难以在动画中途暂停、反转），实现复杂序列动画或联动动画非常麻烦。需要自己计算max-height这类值，有时不够灵活。

三、 进阶控制：与React生命周期的舞蹈 - CSS Animation

当简单的两点过渡无法满足你，比如你需要一个加载旋转、一个无限循环的呼吸效果，或者一个有多个关键帧的复杂动画时，CSS Animation就登场了。在React中，我们通过添加或移除包含@keyframes定义的类名来触发它们。

技术栈：React + CSS

让我们创建一个旋转的加载指示器和一个弹跳进入的提示框。

// 示例2: 使用CSS Animation的加载器和弹入提示
import React, { useState } from 'react';
import './AnimationDemo.css';

function CssAnimationDemo() {
  const [isLoading, setIsLoading] = useState(false);
  const [showMessage, setShowMessage] = useState(false);

  const startLoading = () => {
    setIsLoading(true);
    // 3秒后停止加载
    setTimeout(() => setIsLoading(false), 3000);
  };

  const toggleMessage = () => {
    setShowMessage(!showMessage);
  };

  return (
    <div>
      <div className="demo-section">
        <h3>加载动画</h3>
        <button onClick={startLoading} disabled={isLoading}>
          模拟加载
        </button>
        {/* 
          当 `isLoading` 为 true 时，添加 `spin` 类名。
          `spin` 类绑定了 `rotate` 这个关键帧动画，让元素无限旋转。
        */}
        <div className={`loader ${isLoading ? 'spin' : ''}`}></div>
        <p>{isLoading ? '加载中...' : '准备就绪'}</p>
      </div>

      <div className="demo-section">
        <h3>弹入提示</h3>
        <button onClick={toggleMessage}>
          {showMessage ? '隐藏提示' : '显示提示'}
        </button>
        {/* 
          当 `showMessage` 为 true 时，添加 `bounce-in` 类名。
          这个类会触发一次 `bounceIn` 关键帧动画。
          注意：这里没有“退出”动画，消息会直接消失。
        */}
        {showMessage && (
          <div className="message-box bounce-in">
            你好！这是一个弹跳出现的消息！
          </div>
        )}
      </div>
    </div>
  );
}

export default CssAnimationDemo;

配套的CSS文件 (AnimationDemo.css)：

/* 加载器样式 */
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top-color: #3498db; /* 顶部颜色不同，形成旋转效果 */
  border-radius: 50%;
  margin: 1rem auto;
  /* 默认不旋转 */
}

/* 旋转动画的关键帧定义 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 这个类名被添加时，启动旋转动画 */
.loader.spin {
  animation: rotate 1s linear infinite; /* 名称，时长，速度曲线，无限循环 */
}

/* 提示框基础样式 */
.message-box {
  background-color: #2ecc71;
  color: white;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  text-align: center;
  opacity: 0; /* 动画开始前是透明的 */
  transform: scale(0.8); /* 动画开始前缩小一点 */
}

/* 弹入动画的关键帧定义 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 这个类名被添加时，触发一次弹入动画 */
.message-box.bounce-in {
  animation: bounceIn 0.6s ease-out forwards;
  /* `forwards` 表示动画结束后，保持最后一帧的样式，而不是跳回初始状态 */
}

应用场景与优缺点：

• 场景：独立的、定义好的动画效果，如加载动画、图标特效、页面元素的入场强调动画。
• 优点：依然有很好的性能，能实现比Transition更复杂的多阶段动画，代码组织清晰（动画定义在CSS中）。
• 缺点：与React状态的联动依然生硬。最大的痛点是难以实现流畅的“退出动画”。在上例中，提示框是直接消失的，因为它被React从DOM中移除了。要实现淡出，你需要用JavaScript延迟DOM移除，并手动管理另一个“淡出”的类名，代码会变得复杂且容易出错。

四、 王者降临：用Framer Motion驾驭复杂动画

前面两种CSS方案在遇到复杂交互和状态逻辑时，会显得力不从心。这时，我们就需要请出React动画库中的明星——Framer Motion。它的核心哲学是“声明式动画”，你只需要描述组件“应该是什么状态”，它就会自动计算出如何从当前状态动画到目标状态。

技术栈：React + Framer Motion 首先，你需要安装它：npm install framer-motion

让我们用Framer Motion重写之前的例子，并增加更酷的功能。

// 示例3：使用Framer Motion实现高级动画
import React, { useState } from 'react';
// 导入Framer Motion的核心组件
import { motion, AnimatePresence } from 'framer-motion';

function FramerMotionDemo() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [showMessage, setShowMessage] = useState(false);
  const [list, setList] = useState(['项目A', '项目B', '项目C']);

  const addItem = () => {
    setList([...list, `新项目 ${Date.now().toString().slice(-4)}`]);
  };

  const removeItem = (index) => {
    const newList = [...list];
    newList.splice(index, 1);
    setList(newList);
  };

  return (
    <div>
      {/* 1. 展开收起面板 - 简单多了！ */}
      <div className="demo-section">
        <h3>Framer Motion 展开面板</h3>
        <button onClick={() => setIsExpanded(!isExpanded)}>
          {isExpanded ? '收起' : '展开'}
        </button>
        {/* 
          `motion.div` 是一个可以动画化的div。
          `animate` 属性定义了它“应该”具有的样式。
          `initial` 定义了初始样式。
          Framer Motion会自动在两者间生成过渡动画。
          `transition` 可以自定义动画参数。
        */}
        <motion.div
          className="panel-content"
          initial={{ opacity: 0, height: 0 }}
          animate={{
            opacity: isExpanded ? 1 : 0,
            height: isExpanded ? 'auto' : 0,
          }}
          transition={{ duration: 0.3 }}
        >
          <p>这是用Framer Motion控制的内容。</p>
          <p>无需计算max-height，直接使用`height: auto`即可！</p>
        </motion.div>
      </div>

      {/* 2. 加载动画与提示框 - 轻松实现进出场 */}
      <div className="demo-section">
        <h3>加载与提示</h3>
        <button onClick={() => setIsLoading(true)} disabled={isLoading}>
          开始加载
        </button>
        {/* `animate` 可以直接使用关键帧名称或动态属性 */}
        <motion.div
          className="loader"
          animate={{ rotate: isLoading ? 360 : 0 }}
          transition={{ repeat: isLoading ? Infinity : 0, duration: 1, ease: "linear" }}
        />

        <button onClick={() => setShowMessage(!showMessage)} style={{ marginLeft: '1rem' }}>
          切换提示
        </button>

        {/* 
          `AnimatePresence` 是一个魔法组件！
          它允许子组件在从React树中卸载时，先执行退出动画(`exit`属性)，然后再真正移除。
        */}
        <AnimatePresence>
          {showMessage && (
            <motion.div
              className="message-box"
              initial={{ opacity: 0, scale: 0.5, y: -50 }} // 入场初始状态
              animate={{ opacity: 1, scale: 1, y: 0 }}    // 入场动画目标状态
              exit={{ opacity: 0, scale: 0.5, y: 50 }}    // 退出动画目标状态
              transition={{ type: 'spring', stiffness: 200 }} // 使用弹簧物理动画
            >
              这是一个有入场和退出的高级消息！
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* 3. 列表动画 - Framer Motion的杀手级功能 */}
      <div className="demo-section">
        <h3>动画列表</h3>
        <button onClick={addItem}>添加项目</button>
        <ul>
          {/* 
            `layout` 属性是神技！添加它之后，列表项的任何位置、大小变化都会自动产生平滑动画。
            无论是排序、插入还是删除。
          */}
          <AnimatePresence>
            {list.map((item, index) => (
              <motion.li
                key={item} // Key必须稳定
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 20 }}
                transition={{ duration: 0.2 }}
                layout // 启用布局动画
                onClick={() => removeItem(index)}
                style={{ cursor: 'pointer', padding: '0.5rem', margin: '0.2rem', background: '#eee' }}
              >
                {item} (点击删除)
              </motion.li>
            ))}
          </AnimatePresence>
        </ul>
      </div>
    </div>
  );
}

export default FramerMotionDemo;

应用场景、优缺点与注意事项：

• 应用场景：
  • 复杂的交互式动画：如拖拽排序、手势驱动动画。
  • 需要进出场动画的组件：模态框、通知、路由切换。
  • 布局动画：列表重排、网格变化。
  • 物理感动画：弹簧、惯性等效果。
• 优点：
  1. 声明式API：代码直观，易于理解和管理。
  2. 强大的布局动画：layout属性解决了一大CSS动画难题。
  3. 完美的生命周期集成：通过AnimatePresence轻松处理组件卸载动画。
  4. 丰富的动效：内置多种过渡类型（弹簧、惯性等）。
  5. 手势支持：轻松集成拖拽、点击、悬停等手势动画。
• 缺点：
  1. 包体积：相比纯CSS，会增加打包后的体积。
  2. 运行时开销：动画由JavaScript计算，在极端复杂或低性能设备上可能不如纯CSS流畅。
  3. 学习曲线：需要学习一套新的API，虽然它设计得很好。
• 注意事项：
  • 对于最简单的悬停、焦点状态动画，有时纯CSS :hover 更轻量。
  • 使用layout动画时，要注意性能，避免在大型列表上滥用。
  • 始终为列表项提供稳定且唯一的key，这是正确动画的基础。

五、 总结与选择建议

走完了从CSS Transition到Framer Motion的旅程，你应该对React动画的生态有了清晰的认识。它们不是互相取代的关系，而是适用于不同场景的工具。

• 追求极致性能或做简单交互：首选 CSS Transition / Animation。比如一个按钮的颜色变化，一个图标的旋转，用CSS实现是最高效的选择。
• 需要精细控制动画生命周期和复杂交互：毫不犹豫地选择 Framer Motion。尤其是当你的动画需要与React组件的挂载/卸载、状态变化深度绑定时，它能极大地提升开发效率和动画效果的上限。处理列表、模态框、页面过渡，Framer Motion几乎是目前最优雅的解决方案。

记住，好的动画是克制的动画。它应该服务于功能，提升体验，而不是炫技。从用户的角度出发，选择合适的工具，创造出流畅、自然、令人愉悦的界面，这才是我们学习动画实现的终极目标。希望这篇攻略能成为你React动画之旅中的一份实用地图。