当前位置：首页 > React

react如何动画

2026-01-13 10:19:51React

React 动画实现方法

React 中实现动画可以通过多种方式，包括原生 CSS、第三方库或 React 内置的动画解决方案。以下是几种常见方法：

使用 CSS 动画和过渡

通过 CSS 的 transition 或 @keyframes 实现动画效果，结合 React 的状态管理控制类名的切换。

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

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

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

使用 React Transition Group

React Transition Group 是一个轻量级的动画库，用于管理组件的进入和离开状态。

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

function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition
        in={inProp}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>Content</div>
      </CSSTransition>
      <button onClick={() => setInProp(!inProp)}>Toggle</button>
    </div>
  );
}

使用 Framer Motion

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

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      animate={{ x: 100 }}
      transition={{ duration: 0.5 }}
    >
      Animated Element
    </motion.div>
  );
}

使用 React Spring

React Spring 是一个基于物理的动画库，适合复杂的交互式动画。

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

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
  return <animated.div style={props}>Fade In</animated.div>;
}

使用 GreenSock (GSAP)

GSAP 是一个高性能的动画库，可以通过 gsap-react-plugin 在 React 中使用。

react如何动画

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

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

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

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