当前位置：首页 > React

react如何设置动画

2026-02-12 06:43:48React

使用 CSS Transition 实现简单动画

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

/* CSS 文件 */
.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

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

在 React 组件中，通过 useState 控制类名的切换：

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

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

  return (
    <div>
      <div className={isVisible ? 'fade-in' : 'fade-out'}>
        这是一个淡入淡出动画
      </div>
      <button onClick={() => setIsVisible(!isVisible)}>
        切换可见性
      </button>
    </div>
  );
}

使用 React Transition Group 管理动画生命周期

react-transition-group 是一个官方推荐的动画库，提供组件进入和离开时的动画控制。

安装：

npm install react-transition-group

使用 CSSTransition 组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css';

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

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        切换动画
      </button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="fade-element">
          这是一个渐变动画
        </div>
      </CSSTransition>
    </div>
  );
}

CSS 配合 CSSTransition：

react如何设置动画

.fade-element {
  opacity: 0;
  transition: opacity 300ms ease-in;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
}

使用 Framer Motion 实现复杂动画

framer-motion 是一个功能强大的动画库，支持手势、物理动画等高级效果。

安装：

npm install framer-motion

基础动画示例：

react如何设置动画

import React from 'react';
import { motion } from 'framer-motion';

function Box() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.2 }}
      whileTap={{ scale: 0.9 }}
    >
      这是一个 Framer Motion 动画
    </motion.div>
  );
}

使用 React Spring 实现物理动画

react-spring 基于物理模型实现动画，适合流畅的交互效果。

安装：

npm install react-spring

基础示例：

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

function SpringDemo() {
  const props = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    config: { duration: 1000 },
  });

  return (
    <animated.div style={props}>
      这是一个 React Spring 动画
    </animated.div>
  );
}

结合 SVG 动画

在 React 中，可以通过 react-spring 或 framer-motion 实现 SVG 动画。

import React from 'react';
import { motion } from 'framer-motion';

function SvgAnimation() {
  return (
    <svg width="100" height="100">
      <motion.circle
        cx="50"
        cy="50"
        r="40"
        fill="blue"
        animate={{ cx: [50, 100, 50] }}
        transition={{ duration: 2, repeat: Infinity }}
      />
    </svg>
  );
}