当前位置：首页 > React

react的动画实现

2026-01-26 11:00:32React

React 动画实现方式

React 中实现动画有多种方式，以下列举常见方法及其特点：

CSS 过渡与动画 通过 CSS 的 transition 或 @keyframes 实现简单动画效果。在 React 中通过动态修改 className 或 style 触发动画。

react的动画实现

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

function FadeComponent({ isVisible }) {
  return <div className={isVisible ? 'fade-in' : 'fade-out'} />;
}

React Transition Group 提供组件化管理进入/离开动画的库，包含 Transition、CSSTransition、SwitchTransition 等组件。

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

<CSSTransition
  in={show}
  timeout={300}
  classNames="fade"
  unmountOnExit
>
  <div>内容</div>
</CSSTransition>

Framer Motion 声明式动画库，提供丰富的动画 API 和手势支持。

react的动画实现

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
/>

React Spring 基于物理的动画库，适合复杂动画和连续交互。

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

const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return <animated.div style={props}>内容</animated.div>;

GSAP 集成 GreenSock 动画平台提供专业级动画控制。

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

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