当前位置：首页 > React

react如何添加效果

2026-02-11 20:35:24React

在React中添加效果的方法

React中可以通过多种方式实现动画、过渡或其他视觉效果，常用的方法包括CSS动画、React Transition Group库、Framer Motion等第三方工具。

使用CSS动画

通过定义CSS类来实现简单的动画效果，在React组件中通过状态控制类名的切换。

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

function FadeInComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <div className={`box ${isActive ? 'fade-in' : ''}`}>内容</div>
      <button onClick={() => setIsActive(!isActive)}>
        切换效果
      </button>
    </div>
  );
}

对应的CSS文件：

.box {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.box.fade-in {
  opacity: 1;
}

使用React Transition Group

这个库提供了组件来管理元素的进入和离开动画。

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

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

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        切换显示
      </button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="message">动画内容</div>
      </CSSTransition>
    </div>
  );
}

使用Framer Motion

Framer Motion提供了声明式的动画API，适合创建复杂的交互式动画。

import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      可交互内容
    </motion.div>
  );
}

使用React Spring

React Spring是基于物理的动画库，适合创建流畅自然的动画效果。

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

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

  return <animated.div style={props}>渐显内容</animated.div>;
}

实现滚动动画

使用Intersection Observer API或第三方库如react-intersection-observer实现滚动触发动画。

import { useInView } from 'react-intersection-observer';

function ScrollComponent() {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });

  return (
    <div ref={ref} className={inView ? 'animate' : ''}>
      当滚动到视口时会触发动画
    </div>
  );
}

每种方法都有其适用场景，CSS动画适合简单效果，React Transition Group适合组件挂载/卸载动画，Framer Motion和React Spring适合复杂交互式动画，滚动动画则适合页面滚动时的视觉效果。根据项目需求选择合适的方法即可。

react如何添加效果