react如何处理动画
处理动画的常用方法
React中处理动画可以通过多种方式实现，包括CSS动画、第三方库或React内置API。以下是几种主流方法：
CSS过渡与关键帧动画
直接在组件的CSS中定义transition或@keyframes规则，通过类名切换触发动画。适合简单的状态变化动画，如悬停效果或显示隐藏过渡。
.fade-in {
animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}React Transition Group
该库提供CSSTransition和Transition组件，管理组件的装载/卸载动画。通过in属性控制动画触发时机，与CSS类名配合实现阶段式动画（如-enter、-enter-active）。
<CSSTransition in={isVisible} timeout={300} classNames="fade" unmountOnExit>
<div>内容</div>
</CSSTransition>Framer Motion
流行的动画库提供声明式API，支持复杂动画序列和手势交互。通过motion组件和动画属性（如animate、transition）实现物理效果。
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8 }}
/>React Spring
基于物理的动画库，适合自然流畅的效果。使用useSpring或animated组件创建弹簧动画，支持数值插值和链式动画。
const styles = useSpring({
from: { x: 0 },
to: { x: 100 },
config: { tension: 200 }
});
return <animated.div style={styles} />;性能优化建议
减少重绘区域
使用will-change属性或transform/opacity属性触发GPU加速，避免动画阻塞主线程。对复杂动画使用requestAnimationFrame。
懒加载动画库
通过动态导入（如React.lazy）按需加载动画库，减少初始包体积。对于轻量动画优先考虑CSS解决方案。
使用React.memo 避免不必要的组件渲染干扰动画稳定性，对静态子组件应用记忆化。
