react 实现animate
React 实现动画的方法
在 React 中实现动画可以通过多种方式完成，以下是几种常见的方法：
使用 CSS 动画
通过定义 CSS 的 @keyframes 或 transition 属性，结合 React 的状态管理实现动画效果。
/* 定义动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1s ease-in;
}import React from 'react';
import './styles.css';
function AnimatedComponent() {
return <div className="fade-in">Hello, Animation!</div>;
}使用 React Transition Group
React Transition Group 是一个库，用于管理组件的进入和退出动画。
import { CSSTransition } from 'react-transition-group';
function App() {
const [show, setShow] = React.useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>Toggle</button>
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>Animated Content</div>
</CSSTransition>
</div>
);
}使用 Framer Motion
Framer Motion 是一个功能强大的动画库，专为 React 设计。
import { motion } from 'framer-motion';
function App() {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
Hello, Framer Motion!
</motion.div>
);
}使用 React Spring
React Spring 是一个基于物理的动画库，适合复杂的动画需求。
import { useSpring, animated } from 'react-spring';
function App() {
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return <animated.div style={props}>Hello, React Spring!</animated.div>;
}选择合适的动画方法
- 简单动画：CSS 动画或 React Transition Group。
- 复杂交互：Framer Motion 或 React Spring。
- 性能敏感场景：优先考虑 CSS 动画或 React Spring。
根据项目需求和动画复杂度选择合适的方法。
