当前位置：首页 > React

react如何动画

2026-03-30 16:06:55React

React 动画实现方法

React 中实现动画效果有多种方式，根据需求选择合适的方法。

使用 CSS 过渡和动画

在 React 组件中直接使用 CSS 的 transition 和 animation 属性是最简单的方式。通过修改组件的 className 或 style 来触发动画。

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

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

  return (
    <div>
      <div className={isVisible ? 'fade-in' : 'fade-out'}>
        This will fade in and out
      </div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Visibility
      </button>
    </div>
  );
}

对应的 CSS 文件：

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

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

使用 React Transition Group

React Transition Group 是一个官方维护的动画库，提供组件用于管理组件在进入和离开 DOM 时的动画状态。

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

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

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        Toggle
      </button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="alert"
        unmountOnExit
      >
        <div className="alert">
          This is a CSS transition
        </div>
      </CSSTransition>
    </div>
  );
}

使用 Framer Motion

Framer Motion 是一个流行的 React 动画库，提供声明式 API 和强大的动画功能。

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      animate={{
        scale: [1, 2, 2, 1, 1],
        rotate: [0, 0, 270, 270, 0],
        borderRadius: ["20%", "20%", "50%", "50%", "20%"]
      }}
      transition={{
        duration: 2,
        ease: "easeInOut",
        times: [0, 0.2, 0.5, 0.8, 1],
        repeat: Infinity,
        repeatDelay: 1
      }}
    />
  );
}

使用 React Spring

React Spring 是一个基于物理的动画库，提供更自然的动画效果。

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

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

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

使用 GreenSock (GSAP)

GSAP 是一个高性能的 JavaScript 动画库，可以与 React 集成。

react如何动画

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

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

  useEffect(() => {
    gsap.to(boxRef.current, {
      duration: 1,
      x: 100,
      rotation: 360,
      ease: "bounce.out"
    });
  }, []);

  return <div ref={boxRef} className="box">Hello</div>;
}