生命周期 动画过渡如何在组件挂载与卸载生命周期中配合 CSS Transition 实现淡入淡出

挂载时先隐藏后加 fade-in 类实现淡入，卸载时设 isExiting 为 true 并监听 transitionend 后再卸载以完成淡出，需配合 will-change 和统一 transition 属性确保动画稳定。

在组件挂载（mount）和卸载（unmount）时实现淡入淡出动画，核心是让 React 的生命周期（或 Hook）与 CSS transition 协同工作：组件存在但不可见时先加类触发过渡，再通过状态控制显隐，避免直接销毁/创建导致动画中断。

挂载时淡入：用 useEffect 延迟添加显示类

组件初次渲染时默认隐藏（opacity: 0），挂载后立即添加「进入」类（如 fade-in），借助 CSS 过渡完成淡入。关键点是确保 DOM 元素已存在再触发动画：

1. 初始样式设为 opacity: 0; transition: opacity 0.3s ease;
2. 用 useEffect 在挂载后同步添加 fade-in 类（可配合 useState 控制 class 切换）
3. 不要在 render 中直接写 className="fade-in"，否则首帧就可见，失去“从 0 开始”的效果

卸载时淡出：阻止立即卸载，等动画结束再移除节点

直接 return null 会跳过动画。正确做法是：点击关闭时只设 isShowing = false，保持组件渲染，并添加 fade-out 类；动画结束后再真正卸载：

1. 监听 transitionend 事件，或用 setTimeout（时间需与 CSS transition-duration 一致）
2. 事件触发后更新状态（如 setMounted(false)），此时才真正不渲染该组件
3. CSS 中 .fade-out 应定义为 opacity: 0;，且不能覆盖原有 transition 声明

CSS 过渡需注意的细节

仅靠 transition: opacity 0.3s 不够稳定，容易因重排/重绘失效：

1. 给元素加 will-change: opacity; 提示浏览器优化渲染
2. 确保过渡属性可动画化（opacity、transform 安全；display、height 不行）
3. 避免同时设置 visibility: hidden 和 opacity: 0 —— visibility 会立即隐藏，打断过渡；应在 transitionend 后再设 visibility: hidden 或移除节点

推荐结构（函数组件 + useEffect）

用一个 isVisible 控制是否渲染，一个 isExiting 控制淡出状态：

1. 挂载：组件渲染 → useEffect 添加 fade-in → 动画开始
2. 点击关闭：设 isExiting = true → 添加 fade-out → 监听 transitionend → 触发后设 isVisible = false
3. CSS 中统一管理进/出：用同一组 transition 属性，不同类名切换 opacity 值