当前位置：首页 > React

react如何处理动画

2026-03-31 16:48:18React

使用 CSS 过渡和动画

React 可以直接利用 CSS 的过渡（transition）和关键帧动画（@keyframes）实现动画效果。通过动态添加或移除 CSS 类名，结合 className 或 style 属性控制动画状态。

import { useState } from 'react';

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

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

.box {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.box.fade-in {
  opacity: 1;
}

使用 React Transition Group

react-transition-group 是一个官方推荐的库，用于管理组件的进入和离开动画。它提供 CSSTransition、Transition 等组件，与 CSS 动画无缝集成。

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

function Example() {
  const [show, setShow] = useState(false);

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

.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 和复杂的动画效果（如弹簧物理、手势交互）。适合需要高性能或复杂动画的场景。

import { motion } from 'framer-motion';

function DragExample() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      Drag Me
    </motion.div>
  );
}

使用 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}>Fade In</animated.div>;
}

使用 GreenSock (GSAP)

GSAP 是一个专业的动画库，适合需要精细控制时间轴或复杂序列动画的场景。通过 useRef 和 useEffect 集成到 React 中。

react如何处理动画

import { useRef, useEffect } from 'react';
import gsap from 'gsap';

function GsapDemo() {
  const boxRef = useRef();

  useEffect(() => {
    gsap.to(boxRef.current, {
      x: 100,
      duration: 1,
      repeat: -1,
      yoyo: true,
    });
  }, []);

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