当前位置：首页 > React

react如何设置动画

2026-02-26 16:39:46React

使用 CSS 过渡动画

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

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

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

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

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

使用 CSS 关键帧动画

通过 @keyframes 定义更复杂的动画，结合 animation 属性实现。

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.slide {
  animation: slide-in 1s forwards;
}

在组件中直接应用类名：

function SlideComponent() {
  return <div className="slide">Sliding content</div>;
}

使用 React Transition Group

react-transition-group 库提供了组件化的动画控制方式，适合管理进入和离开的动画。

安装库：

npm install react-transition-group

示例代码：

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

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

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

配套 CSS：

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

使用 Framer Motion

framer-motion 是一个强大的动画库，支持声明式动画和复杂交互。

安装库：

npm install framer-motion

示例代码：

import { motion } from 'framer-motion';

function MotionExample() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Animated with Framer Motion
    </motion.div>
  );
}

支持更复杂的动画如拖动、手势等：

<motion.div
  drag
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
/>

使用 React Spring

react-spring 基于物理模型的动画库，适合流畅的弹簧动画效果。

安装库：

npm install react-spring

示例代码：

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

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

  return <animated.div style={props}>Hello React Spring</animated.div>;
}

支持复杂的动画组合：

const [flip, setFlip] = useState(false);
const { transform } = useSpring({
  transform: `rotateY(${flip ? 180 : 0}deg)`,
  onRest: () => setFlip(!flip),
});