当前位置：首页 > React

react如何添加效果

2026-03-30 23:36:56React

在React中添加效果的方法

使用CSS动画和过渡

在React组件中直接引入CSS文件，利用CSS的animation和transition属性实现动画效果。CSS适合简单的视觉效果，如悬停、淡入淡出等。

/* styles.css */
.fade-in {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

import './styles.css';

function App() {
  return <div className="fade-in">内容淡入效果</div>;
}

使用React Transition Group

React Transition Group是一个库，用于管理组件的进入和离开动画。适合列表项、模态框等动态内容的过渡效果。

npm install 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>内容会淡入淡出</div>
      </CSSTransition>
    </div>
  );
}

使用Framer Motion

Framer Motion是一个强大的动画库，提供声明式API和复杂动画支持。适合需要精细控制的动画场景。

npm install framer-motion

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      高级动画效果
    </motion.div>
  );
}

使用useEffect钩子实现滚动效果

通过useEffect和window事件监听，可以实现滚动触发效果，如视差滚动或元素显示。

import { useState, useEffect } from 'react';

function ScrollEffect() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 100) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div style={{ opacity: isVisible ? 1 : 0 }}>滚动时显示</div>;
}

结合GreenSock (GSAP)

GSAP是一个专业级动画库，适用于复杂的时间轴控制和高性能动画。

react如何添加效果

npm install gsap

import { useRef, useEffect } from 'react';
import gsap from 'gsap';

function App() {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, {
      x: 100,
      duration: 1,
      rotation: 360,
    });
  }, []);

  return <div ref={boxRef}>GSAP动画</div>;
}