当前位置：首页 > React

react如何设置动画

2026-01-24 02:44:33React

在React中设置动画的常用方法

使用CSS Transition

通过CSS的transition属性实现简单动画效果。在React组件中直接添加CSS类或内联样式。

.box {
  transition: all 0.3s ease;
}
.box:hover {
  transform: scale(1.1);
}

function AnimatedBox() {
  return <div className="box">Hover me</div>;
}

使用CSS Animation

定义@keyframes动画并通过className触发。

react如何设置动画

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s;
}

function FadeInComponent() {
  return <div className="fade-in">Content</div>;
}

使用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)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>Animated Content</div>
      </CSSTransition>
    </>
  );
}

使用Framer Motion

功能强大的第三方动画库，支持复杂动画和手势交互。

react如何设置动画

npm install framer-motion

import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Content
    </motion.div>
  );
}

使用React Spring

基于物理的动画库，适合自然流畅的弹簧效果。

npm install react-spring

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

function SpringComponent() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return <animated.div style={props}>Spring Content</animated.div>;
}

使用GSAP

专业级动画库，适合复杂时间轴控制。

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 });
  }, []);

  return <div ref={ref}>GSAP Animation</div>;
}