react实现卸载动画
使用 CSS 和 React 实现卸载动画
在 React 中实现卸载动画，可以通过结合 CSS 动画和 React 的生命周期方法或 Hooks 来完成。以下是几种常见的方法：
使用 CSS Transition 和 React 状态
定义一个 CSS 类，包含过渡效果：
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms ease-out;
}在 React 组件中，通过状态控制卸载动画：
import { useState } from 'react';
function AnimatedComponent() {
const [isVisible, setIsVisible] = useState(true);
return (
<div>
{isVisible && (
<div className="fade-exit fade-exit-active">
Content to animate out
</div>
)}
<button onClick={() => setIsVisible(false)}>
Trigger Unmount Animation
</button>
</div>
);
}使用 React Transition Group
React Transition Group 是一个流行的库，专门用于管理组件的进入和退出动画。
安装 React Transition Group：
npm install react-transition-group使用 CSSTransition 组件：
import { CSSTransition } from 'react-transition-group';
import { useState } from 'react';
function AnimatedComponent() {
const [show, setShow] = useState(true);
return (
<div>
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>Content to animate out</div>
</CSSTransition>
<button onClick={() => setShow(false)}>
Trigger Unmount Animation
</button>
</div>
);
}对应的 CSS：
.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 是一个更高级的动画库，提供更丰富的动画功能。
安装 Framer Motion：
npm install framer-motion实现卸载动画：
import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';
function AnimatedComponent() {
const [show, setShow] = useState(true);
return (
<div>
<AnimatePresence>
{show && (
<motion.div
initial={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
Content to animate out
</motion.div>
)}
</AnimatePresence>
<button onClick={() => setShow(false)}>
Trigger Unmount Animation
</button>
</div>
);
}自定义 Hook 实现卸载动画
创建一个自定义 Hook 来处理动画逻辑：
import { useState, useEffect } from 'react';
function useUnmountAnimation(duration = 300) {
const [isMounted, setIsMounted] = useState(true);
const [shouldRender, setShouldRender] = useState(true);
useEffect(() => {
if (!isMounted) {
const timer = setTimeout(() => {
setShouldRender(false);
}, duration);
return () => clearTimeout(timer);
}
}, [isMounted, duration]);
return [shouldRender, setIsMounted];
}
function AnimatedComponent() {
const [shouldRender, setIsMounted] = useUnmountAnimation();
return (
<div>
{shouldRender && (
<div className={!isMounted ? 'fade-out' : ''}>
Content to animate out
</div>
)}
<button onClick={() => setIsMounted(false)}>
Trigger Unmount Animation
</button>
</div>
);
}对应的 CSS：
.fade-out {
animation: fadeOut 0.3s ease-out forwards;
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}以上方法可以根据项目需求和技术栈选择合适的实现方式。React Transition Group 和 Framer Motion 提供了更完整的解决方案，而自定义 CSS 和 Hooks 则更适合简单的动画需求。
