react实现出场动画

使用 CSS Transition 实现基础出场动画

在 React 中通过 CSS 的 transition 属性配合状态变化实现平滑过渡效果。定义一个 CSS 类包含过渡属性和初始样式，通过 React 的状态控制类名的切换。

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

在组件中使用 useState 控制显示状态，通过条件渲染触发动画：

import { useState } from 'react';
import './styles.css';

function FadeComponent() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        Toggle
      </button>
      {show && (
        <div className="fade-enter-active">
          Content to animate
        </div>
      )}
    </div>
  );
}

使用 React Transition Group 库处理复杂动画

对于需要精细控制的动画序列，推荐使用 react-transition-group 库。该库提供 CSSTransition 组件自动管理类名生命周期，支持入场和出场动画的协调。

安装依赖：

npm install react-transition-group

实现示例：

import { CSSTransition } from 'react-transition-group';

function App() {
  const [inProp, setInProp] = useState(false);

  return (
    <div>
      <button onClick={() => setInProp(!inProp)}>
        Toggle
      </button>
      <CSSTransition
        in={inProp}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>Animated content</div>
      </CSSTransition>
    </div>
  );
}

对应的 CSS 需匹配 classNames 前缀：

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

使用 Framer Motion 实现高级动画

对于需要物理引擎或复杂路径的动画，framer-motion 提供声明式 API 和手势支持。定义 motion 组件并通过 animate 属性控制动画状态。

安装依赖：

npm install framer-motion

实现滑入滑出动画：

import { motion, AnimatePresence } from "framer-motion";

function SlideComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ x: -100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            exit={{ x: 100, opacity: 0 }}
            transition={{ type: "spring", stiffness: 100 }}
          >
            Slide content
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

性能优化注意事项

使用 will-change CSS 属性提示浏览器优化层创建：

.animated-element {
  will-change: transform, opacity;
}

对于列表动画，为每个元素分配唯一 key 属性帮助 React 正确识别节点。避免在动画期间触发组件重渲染，可通过 React.memo 或 useMemo 优化。