当前位置：首页 > React

react 实现animate

2026-01-26 14:07:51React

React 实现动画的方法

在 React 中实现动画可以通过多种方式完成，以下是几种常见的方法：

使用 CSS 动画

通过定义 CSS 的 @keyframes 或 transition 属性，结合 React 的状态管理实现动画效果。

react 实现animate

/* 定义动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

import React from 'react';
import './styles.css';

function AnimatedComponent() {
  return <div className="fade-in">Hello, Animation!</div>;
}

使用 React Transition Group

React Transition Group 是一个库，用于管理组件的进入和退出动画。

react 实现animate

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

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

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>Animated Content</div>
      </CSSTransition>
    </div>
  );
}

使用 Framer Motion

Framer Motion 是一个功能强大的动画库，专为 React 设计。

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello, Framer Motion!
    </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}>Hello, React Spring!</animated.div>;
}