react 实现动画过渡效果
使用 CSS Transition 实现简单动画
在 React 中可以通过内联样式或 CSS 类结合 transition 属性实现平滑过渡效果。定义 CSS 类：
.fade-in {
opacity: 0;
transition: opacity 0.3s ease-in;
}
.fade-in.active {
opacity: 1;
}组件中通过状态切换类名：
function FadeComponent() {
const [isActive, setIsActive] = useState(false);
return (
<div
className={`fade-in ${isActive ? 'active' : ''}`}
onClick={() => setIsActive(!isActive)}
>
Toggle Fade
</div>
);
}使用 React Transition Group 库
安装 react-transition-group 后，通过 CSSTransition 组件实现更复杂的动画逻辑：
import { CSSTransition } from 'react-transition-group';
function Example() {
const [show, setShow] = useState(false);
return (
<>
<button onClick={() => setShow(!show)}>Toggle</button>
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>Animated Content</div>
</CSSTransition>
</>
);
}对应 CSS 需定义 .fade-enter、.fade-enter-active 等类名控制各阶段样式。
使用 Framer Motion 实现高级动画
Framer Motion 提供声明式 API 支持弹簧动画、手势交互等：
import { motion } from 'framer-motion';
function MotionComponent() {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
whileHover={{ scale: 1.1 }}
>
Hover Effect
</motion.div>
);
}支持的关键帧动画示例：
<motion.div
animate={{
x: [0, 100, 0],
rotate: [0, 180, 0]
}}
transition={{ duration: 2 }}
/>使用 useSpring 实现物理动画
React Spring 提供基于物理模型的动画，适合自然运动效果：
import { useSpring, animated } from 'react-spring';
function SpringDemo() {
const props = useSpring({
opacity: 1,
from: { opacity: 0 },
config: { tension: 200 }
});
return <animated.div style={props}>Spring Animation</animated.div>;
}多个属性联动示例：
const [props, set] = useSpring(() => ({
x: 0,
backgroundColor: '#ff0000'
}));
// 调用 set({ x: 100, backgroundColor: '#00ff00' }) 触发动画性能优化注意事项
- 优先使用
transform和opacity属性，这些属性不会触发重排 - 避免在频繁更新的组件中使用复杂动画
- 对列表动画使用
React.memo减少不必要的渲染 - 使用
will-change: transform提示浏览器优化层处理
以上方法可根据场景需求组合使用，CSS Transition 适合简单交互，React Transition Group 适用于组件挂载/卸载动画，Framer Motion 和 React Spring 则提供更高级的动态效果控制。
