当前位置：首页 > React

react如何处理动画

2026-03-10 17:22:44React

使用 CSS 过渡（CSS Transitions）

通过 CSS 的 transition 属性实现简单的动画效果。在 React 中可以直接为元素添加类名或内联样式，利用 CSS 控制动画的过渡效果。适合简单的状态变化，如悬停、颜色渐变等。

/* CSS 文件 */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}
.fade-in.active {
  opacity: 1;
}

// React 组件
function FadeInComponent() {
  const [isActive, setIsActive] = useState(false);
  return (
    <div 
      className={`fade-in ${isActive ? 'active' : ''}`}
      onClick={() => setIsActive(true)}
    >
      点击淡入
    </div>
  );
}

使用 CSS 动画（CSS Animations）

通过 @keyframes 定义动画序列，结合 React 的类名或样式控制触发时机。适合复杂的多阶段动画，如旋转、缩放等。

react如何处理动画

/* CSS 文件 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-animation {
  animation: spin 2s linear infinite;
}

// React 组件
function SpinComponent() {
  const [isSpinning, setIsSpinning] = useState(false);
  return (
    <div 
      className={isSpinning ? 'spin-animation' : ''}
      onClick={() => setIsSpinning(!isSpinning)}
    >
      点击旋转
    </div>
  );
}

使用 React Transition Group

第三方库 react-transition-group 提供组件化的动画管理，支持进入/离开动画的生命周期控制。适合列表项增删或路由切换动画。

react如何处理动画

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

function FadeTransition() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>切换</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="fade-element">内容</div>
      </CSSTransition>
    </div>
  );
}

/* 配套 CSS */
.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

专为 React 设计的高性能动画库 framer-motion，支持声明式动画和复杂手势交互。适合高级动画需求，如拖拽、路径动画等。

import { motion } from 'framer-motion';

function DragComponent() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      可拖拽元素
    </motion.div>
  );
}

使用 React Spring

基于物理模型的动画库 react-spring，提供自然流畅的弹簧动画效果。适合数值驱动的动画，如滚动进度、物理回弹等。

import { useSpring, animated } from 'react-spring';

function SpringComponent() {
  const props = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    config: { duration: 1000 },
  });
  return <animated.div style={props}>淡入效果</animated.div>;
}