react实现动画
使用 CSS 过渡实现动画
通过 transition 属性结合 React 的状态管理实现简单动画。定义一个 CSS 类，包含过渡效果，通过 className 动态切换触发动画。
.box {
width: 100px;
height: 100px;
background: blue;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.2);
}在 React 组件中通过状态控制类名：
function AnimatedBox() {
const [isHovered, setIsHovered] = useState(false);
return (
<div
className={`box ${isHovered ? 'hovered' : ''}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
/>
);
}使用 CSS 动画（@keyframes）
通过 @keyframes 定义动画序列，结合 animation 属性实现复杂动画效果。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1s forwards;
}在 React 中通过条件渲染或状态触发动画：
function FadeInComponent({ show }) {
return <div className={show ? 'fade-in' : ''}>内容</div>;
}使用 React Transition Group
第三方库 react-transition-group 提供组件化管理进入/退出动画的能力。安装后通过 CSSTransition 组件控制动画生命周期。
npm install react-transition-group示例代码：
import { CSSTransition } from 'react-transition-group';
function ToggleAnimation() {
const [show, setShow] = useState(false);
return (
<>
<button onClick={() => setShow(!show)}>切换</button>
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>动画内容</div>
</CSSTransition>
</>
);
}需配套 CSS 定义 .fade-enter、.fade-enter-active 等类名。
使用 Framer Motion
Framer Motion 是专为 React 设计的高性能动画库，支持手势、布局动画等高级功能。
安装：
npm install framer-motion示例代码：
import { motion } from 'framer-motion';
function DragAnimation() {
return (
<motion.div
drag
dragConstraints={{ left: 0, right: 100 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
/>
);
}使用 useSpring（React Spring）
React Spring 提供基于物理模型的动画钩子，适合复杂交互动画。
安装：
npm install react-spring示例代码：
import { useSpring, animated } from 'react-spring';
function SpringAnimation() {
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return <animated.div style={props}>淡入内容</animated.div>;
}性能优化建议
- 优先使用 CSS 动画而非 JavaScript 动画，以减少主线程负载。
- 对位移、缩放等属性使用
transform和opacity，以触发 GPU 加速。 - 避免频繁触发重排（如修改
width、height），使用will-change预提示浏览器。
以上方法可根据场景组合使用，CSS 方案适合简单动画，库方案（如 Framer Motion）适合复杂交互需求。
