react.js如何实现动画
使用 CSS 过渡和动画
在 React 中可以通过 CSS 过渡或关键帧动画实现简单动画效果。通过 className 或 style 属性动态切换 CSS 类名或样式触发动画。
import { useState } from 'react';
import './styles.css';
function FadeInComponent() {
const [isActive, setIsActive] = useState(false);
return (
<div
className={`box ${isActive ? 'fade-in' : ''}`}
onClick={() => setIsActive(true)}
>
Click to fade in
</div>
);
}CSS 文件示例：
.box {
opacity: 0;
transition: opacity 0.5s ease;
}
.fade-in {
opacity: 1;
}使用 React Transition Group
react-transition-group 库提供组件化方式管理动画生命周期（进入/退出）。适合列表或条件渲染元素的动画控制。
import { CSSTransition } from 'react-transition-group';
function ToggleComponent() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>Toggle</button>
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div className="alert">Animated content</div>
</CSSTransition>
</div>
);
}CSS 需配合定义 .fade-enter、.fade-enter-active 等类名。
使用 Framer Motion
Framer Motion 是专为 React 设计的高性能动画库，支持复杂动画和手势交互。
import { motion } from 'framer-motion';
function DragComponent() {
return (
<motion.div
drag
dragConstraints={{ left: 0, right: 100 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
Drag me
</motion.div>
);
}使用 React Spring
React Spring 基于物理模型的动画库，适合自然流畅的弹簧动画效果。
import { useSpring, animated } from 'react-spring';
function SpringComponent() {
const props = useSpring({
opacity: 1,
from: { opacity: 0 },
config: { duration: 1000 },
});
return <animated.div style={props}>Fades in</animated.div>;
}使用 GSAP 与 React
GSAP 是专业级动画库，可通过 useLayoutEffect 或 useRef 集成到 React 中。
import { useRef, useEffect } from 'react';
import gsap from 'gsap';
function GsapComponent() {
const boxRef = useRef();
useEffect(() => {
gsap.to(boxRef.current, {
x: 100,
rotation: 360,
duration: 2
});
}, []);
return <div ref={boxRef}>GSAP Animation</div>;
}性能优化建议
- 优先使用 CSS 硬件加速属性（如
transform、opacity）。 - 避免频繁触发重排/重绘的动画属性（如
width、height）。 - 使用
will-change提示浏览器优化。 - 复杂动画考虑使用
requestAnimationFrame或专用动画库。
以上方法可根据场景需求选择，从简单 CSS 到高级物理动画均可覆盖。
