react如何动画
React 动画实现方法
React 中实现动画效果有多种方式，以下介绍几种常用方法：
使用 CSS Transition 通过 CSS 的 transition 属性实现简单动画效果。在 React 组件中添加 className 或 style 属性控制动画触发。
import React, { useState } from 'react';
import './App.css';
function App() {
const [isActive, setIsActive] = useState(false);
return (
<div className={`box ${isActive ? 'active' : ''}`}
onClick={() => setIsActive(!isActive)}>
Click me
</div>
);
}CSS 部分：
.box {
width: 100px;
height: 100px;
background: blue;
transition: all 0.3s ease;
}
.box.active {
transform: scale(1.2);
background: red;
}使用 React Transition Group React Transition Group 提供组件管理组件的装载和卸载动画。
import { CSSTransition } from 'react-transition-group';
function App() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>
Toggle
</button>
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div className="alert">Hello</div>
</CSSTransition>
</div>
);
}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 是一个专门为 React 设计的动画库，提供声明式 API。
import { motion } from 'framer-motion';
function App() {
return (
<motion.div
animate={{ x: 100 }}
transition={{ duration: 0.5 }}
>
Animated Div
</motion.div>
);
}使用 React Spring React Spring 是一个基于物理的动画库，适合复杂动画场景。
import { useSpring, animated } from 'react-spring';
function App() {
const props = useSpring({
opacity: 1,
from: { opacity: 0 },
config: { duration: 1000 }
});
return <animated.div style={props}>Hello</animated.div>;
}使用 GreenSock (GSAP) GSAP 是一个强大的动画库，可以与 React 结合使用。
import { useRef, useEffect } from 'react';
import gsap from 'gsap';
function App() {
const boxRef = useRef();
useEffect(() => {
gsap.to(boxRef.current, {
duration: 1,
x: 100,
rotation: 360
});
}, []);
return <div ref={boxRef}>GSAP Animation</div>;
}动画性能优化建议
- 优先使用 CSS 动画和 transform/opacity 属性，这些属性可以由 GPU 加速
- 避免在动画中使用会引起重排的属性，如 width/height/left/top
- 使用 will-change 属性提示浏览器元素将发生变化
- 对于复杂动画，考虑使用 requestAnimationFrame
- 合理使用动画缓动函数，避免线性动画显得生硬
根据项目需求和动画复杂度，可以选择适合的动画实现方案。简单动画使用 CSS 或 React Transition Group 即可，复杂动画则推荐使用 Framer Motion 或 React Spring 等专业动画库。
