当前位置：首页 > React

react.js如何实现动画

2026-01-25 03:26:56React

使用 CSS 过渡和动画

在 React 中可以通过 CSS 过渡或关键帧动画实现简单动画效果。通过 className 或 style 属性动态切换 CSS 类名或样式触发动画。

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

function FadeInComponent() {
  const [isActive, setIsActive] = useState(false);
  return (
    <div 
      className={`box ${isActive ? 'fade-in' : ''}`}
      onClick={() => setIsActive(true)}
    >
      Click to fade in
    </div>
  );
}

CSS 文件示例：

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

使用 React Transition Group

react-transition-group 库提供组件化方式管理动画生命周期（进入/退出）。适合列表或条件渲染元素的动画控制。

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

function ToggleComponent() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="alert">Animated content</div>
      </CSSTransition>
    </div>
  );
}

CSS 需配合定义 .fade-enter、.fade-enter-active 等类名。

使用 Framer Motion

Framer Motion 是专为 React 设计的高性能动画库，支持复杂动画和手势交互。

import { motion } from 'framer-motion';

function DragComponent() {
  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 SpringComponent() {
  const props = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    config: { duration: 1000 },
  });
  return <animated.div style={props}>Fades in</animated.div>;
}

使用 GSAP 与 React

GSAP 是专业级动画库，可通过 useLayoutEffect 或 useRef 集成到 React 中。

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

function GsapComponent() {
  const boxRef = useRef();
  useEffect(() => {
    gsap.to(boxRef.current, { 
      x: 100, 
      rotation: 360, 
      duration: 2 
    });
  }, []);
  return <div ref={boxRef}>GSAP Animation</div>;
}