react实现出场动画
使用 CSS Transition 实现基础出场动画
在 React 中通过 CSS 的 transition 属性配合状态变化实现平滑过渡效果。定义一个 CSS 类包含过渡属性和初始样式，通过 React 的状态控制类名的切换。
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 500ms ease-out;
}在组件中使用 useState 控制显示状态，通过条件渲染触发动画：
import { useState } from 'react';
import './styles.css';
function FadeComponent() {
const [show, setShow] = useState(true);
return (
<div>
<button onClick={() => setShow(!show)}>
Toggle
</button>
{show && (
<div className="fade-enter-active">
Content to animate
</div>
)}
</div>
);
}使用 React Transition Group 库处理复杂动画
对于需要精细控制的动画序列，推荐使用 react-transition-group 库。该库提供 CSSTransition 组件自动管理类名生命周期，支持入场和出场动画的协调。
安装依赖：
npm install react-transition-group实现示例：
import { CSSTransition } from 'react-transition-group';
function App() {
const [inProp, setInProp] = useState(false);
return (
<div>
<button onClick={() => setInProp(!inProp)}>
Toggle
</button>
<CSSTransition
in={inProp}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>Animated content</div>
</CSSTransition>
</div>
);
}对应的 CSS 需匹配 classNames 前缀：
.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 提供声明式 API 和手势支持。定义 motion 组件并通过 animate 属性控制动画状态。
安装依赖：
npm install framer-motion实现滑入滑出动画：
import { motion, AnimatePresence } from "framer-motion";
function SlideComponent() {
const [isVisible, setIsVisible] = useState(true);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle
</button>
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: 100, opacity: 0 }}
transition={{ type: "spring", stiffness: 100 }}
>
Slide content
</motion.div>
)}
</AnimatePresence>
</div>
);
}性能优化注意事项
使用 will-change CSS 属性提示浏览器优化层创建：
.animated-element {
will-change: transform, opacity;
}对于列表动画，为每个元素分配唯一 key 属性帮助 React 正确识别节点。避免在动画期间触发组件重渲染，可通过 React.memo 或 useMemo 优化。
