挂载时先隐藏后加 fade-in 类实现淡入，卸载时设 isExiting 为 true 并监听 transitionend 后再卸载以完成淡出，需配合 will-change 和统一 transition 属性确保动画稳定。
在组件挂载（mount）和卸载（unmount）时实现淡入淡出动画，核心是让 React 的生命周期（或 Hook）与 CSS transition 协同工作：组件存在但不可见时先加类触发过渡，再通过状态控制显隐，避免直接销毁/创建导致动画中断。
挂载时淡入：用 useEffect 延迟添加显示类
组件初次渲染时默认隐藏（opacity: 0），挂载后立即添加「进入」类（如 fade-in），借助 CSS 过渡完成淡入。关键点是确保 DOM 元素已存在再触发动画：
- 初始样式设为
opacity: 0; transition: opacity 0.3s ease; - 用
useEffect在挂载后同步添加fade-in类（可配合useState控制 class 切换） - 不要在
render中直接写className="fade-in"，否则首帧就可见，失去“从 0 开始”的效果
卸载时淡出：阻止立即卸载，等动画结束再移除节点
直接 return null 会跳过动画。正确做法是：点击关闭时只设 isShowing = false，保持组件渲染，并添加 fade-out 类；动画结束后再真正卸载：
- 监听
transitionend事件，或用setTimeout（时间需与 CSStransition-duration一致） - 事件触发后更新状态（如
setMounted(false)），此时才真正不渲染该组件 - CSS 中
.fade-out应定义为opacity: 0;，且不能覆盖原有 transition 声明
CSS 过渡需注意的细节
仅靠 transition: opacity 0.3s 不够稳定，容易因重排/重绘失效：
立即学习“前端免费学习笔记（深入）”；
- 给元素加
will-change: opacity;提示浏览器优化渲染 - 确保过渡属性可动画化（
opacity、transform安全；display、height不行） - 避免同时设置
visibility: hidden和opacity: 0—— visibility 会立即隐藏，打断过渡；应在transitionend后再设visibility: hidden或移除节点
推荐结构（函数组件 + useEffect）
用一个 isVisible 控制是否渲染，一个 isExiting 控制淡出状态：
- 挂载：组件渲染 →
useEffect添加fade-in→ 动画开始 - 点击关闭：设
isExiting = true→ 添加fade-out→ 监听transitionend→ 触发后设isVisible = false - CSS 中统一管理进/出：用同一组 transition 属性，不同类名切换 opacity 值
