react的动画实现
React 动画实现方式
React 中实现动画有多种方式，以下列举常见方法及其特点：
CSS 过渡与动画
通过 CSS 的 transition 或 @keyframes 实现简单动画效果。在 React 中通过动态修改 className 或 style 触发动画。
.fade-in {
opacity: 1;
transition: opacity 0.5s ease-in;
}
.fade-out {
opacity: 0;
transition: opacity 0.5s ease-out;
}function FadeComponent({ isVisible }) {
return <div className={isVisible ? 'fade-in' : 'fade-out'} />;
}React Transition Group
提供组件化管理进入/离开动画的库，包含 Transition、CSSTransition、SwitchTransition 等组件。
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>内容</div>
</CSSTransition>Framer Motion 声明式动画库，提供丰富的动画 API 和手势支持。
import { motion } from 'framer-motion';
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
/>React Spring 基于物理的动画库，适合复杂动画和连续交互。
import { useSpring, animated } from 'react-spring';
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return <animated.div style={props}>内容</animated.div>;GSAP 集成 GreenSock 动画平台提供专业级动画控制。
import { useRef, useEffect } from 'react';
import gsap from 'gsap';
function Component() {
const ref = useRef();
useEffect(() => {
gsap.to(ref.current, { rotation: 360, duration: 2 });
}, []);
return <div ref={ref} />;
}性能优化建议
- 优先使用 CSS 硬件加速属性（transform、opacity）
- 避免在渲染函数中进行复杂计算
- 使用
will-change提示浏览器优化 - 对于列表动画使用
React.memo减少重复渲染
选择依据
- 简单 UI 动效：CSS 或 React Transition Group
- 复杂交互动画：Framer Motion 或 React Spring
- 精细时间轴控制：GSAP
- 手势驱动需求：Framer Motion
