当前位置：首页 > React

react实现动画

2026-01-26 12:24:56React

使用 CSS 过渡实现动画

通过 transition 属性结合 React 的状态管理实现简单动画。定义一个 CSS 类，包含过渡效果，通过 className 动态切换触发动画。

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.2);
}

在 React 组件中通过状态控制类名：

function AnimatedBox() {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <div 
      className={`box ${isHovered ? 'hovered' : ''}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    />
  );
}

使用 CSS 动画（@keyframes）

通过 @keyframes 定义动画序列，结合 animation 属性实现复杂动画效果。

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

在 React 中通过条件渲染或状态触发动画：

function FadeInComponent({ show }) {
  return <div className={show ? 'fade-in' : ''}>内容</div>;
}

使用 React Transition Group

第三方库 react-transition-group 提供组件化管理进入/退出动画的能力。安装后通过 CSSTransition 组件控制动画生命周期。

npm install react-transition-group

示例代码：

import { CSSTransition } from 'react-transition-group';
function ToggleAnimation() {
  const [show, setShow] = useState(false);
  return (
    <>
      <button onClick={() => setShow(!show)}>切换</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>动画内容</div>
      </CSSTransition>
    </>
  );
}

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

使用 Framer Motion

Framer Motion 是专为 React 设计的高性能动画库，支持手势、布局动画等高级功能。

安装：

npm install framer-motion

示例代码：

import { motion } from 'framer-motion';
function DragAnimation() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: 0, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  );
}

使用 useSpring（React Spring）

React Spring 提供基于物理模型的动画钩子，适合复杂交互动画。

安装：

npm install react-spring

示例代码：

import { useSpring, animated } from 'react-spring';
function SpringAnimation() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
  return <animated.div style={props}>淡入内容</animated.div>;
}