当前位置：首页 > React

react如何设置动画

2026-03-31 10:06:04React

使用 CSS 过渡动画

在 React 中可以通过 CSS 的 transition 属性实现简单的动画效果。定义一个 CSS 类，通过 className 或 style 属性动态切换。

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

在组件中通过状态控制类名的切换：

import { useState, useEffect } from 'react';

function FadeInComponent() {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    setIsActive(true);
  }, []);

  return <div className={`fade-in ${isActive ? 'active' : ''}`}>内容</div>;
}

使用 CSS 关键帧动画

通过 @keyframes 定义动画序列，结合 animation 属性实现更复杂的动画效果。

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.slide {
  animation: slide-in 1s forwards;
}

在 React 组件中直接应用类名：

function SlideInComponent() {
  return <div className="slide">滑动内容</div>;
}

使用 React Transition Group

react-transition-group 库提供组件化的动画管理，适合处理组件的入场和离场动画。

安装库：

npm install react-transition-group

示例代码：

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

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

  return (
    <>
      <button onClick={() => setShow(!show)}>切换</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>淡入淡出内容</div>
      </CSSTransition>
    </>
  );
}

配套 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

framer-motion 是一个功能强大的动画库，支持声明式动画和复杂手势交互。

安装库：

npm install framer-motion

示例代码：

import { motion } from 'framer-motion';

function ScaleComponent() {
  return (
    <motion.div
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      缩放内容
    </motion.div>
  );
}

使用 GreenSock (GSAP)

GSAP 是一个高性能的 JavaScript 动画库，适合复杂的动画场景。

安装库：

npm install gsap

示例代码：

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

function GsapComponent() {
  const ref = useRef();

  useEffect(() => {
    gsap.from(ref.current, {
      x: -100,
      duration: 1,
      ease: "power2.out"
    });
  }, []);

  return <div ref={ref}>GSAP 动画内容</div>;
}

使用 React Spring

react-spring 是一个基于物理模型的动画库，支持流畅的弹簧动画效果。

安装库：

npm install react-spring

示例代码：

react如何设置动画

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>;
}