当前位置：首页 > React

react 实现动画

2026-01-26 13:20:05React

使用 CSS Transition 实现简单动画

在 React 中可以通过 CSS Transition 实现元素状态变化的平滑过渡效果。通过 className 或 style 属性的变化触发 CSS 动画。

import { useState } from 'react';

function FadeInOut() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      <div 
        className={`box ${isVisible ? 'fade-in' : 'fade-out'}`}
      >
        Content
      </div>
    </div>
  );
}

.box {
  transition: opacity 0.5s ease;
}
.fade-in {
  opacity: 1;
}
.fade-out {
  opacity: 0;
}

使用 React Spring 实现物理动画

React Spring 是基于物理的动画库，适合需要自然运动效果的场景。它支持弹簧动画而非传统的时间曲线。

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

function SpringDemo() {
  const props = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    config: { duration: 1000 }
  });

  return <animated.div style={props}>I will fade in</animated.div>;
}

使用 Framer Motion 实现复杂动画

Framer Motion 提供了声明式的动画 API，支持手势动画、布局动画和复杂的关键帧动画。

import { motion } from 'framer-motion';

function MotionDemo() {
  return (
    <motion.div
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.2 }}
      whileTap={{ scale: 0.8 }}
    >
      Interactive
    </motion.div>
  );
}

使用 React Transition Group 实现组件过渡

React Transition Group 帮助管理组件的挂载和卸载动画，特别适合路由过渡或列表项动画。

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

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

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

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

使用 requestAnimationFrame 实现自定义动画

对于需要完全控制的复杂动画，可以直接使用 requestAnimationFrame API。

react 实现动画

import { useRef, useEffect } from 'react';

function CustomAnimation() {
  const ref = useRef(null);

  useEffect(() => {
    let start;
    const element = ref.current;

    function step(timestamp) {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      element.style.transform = `translateX(${Math.min(progress/10, 200)}px)`;
      if (progress < 2000) {
        window.requestAnimationFrame(step);
      }
    }

    window.requestAnimationFrame(step);
  }, []);

  return <div ref={ref}>Moving</div>;
}

每种方法适用于不同场景：CSS Transition 适合简单状态变化，React Spring 适合物理动画，Framer Motion 适合复杂交互动画，React Transition Group 适合组件过渡，requestAnimationFrame 提供最低层的控制。