挂载时先隐藏后加 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 类；动画结束后再真正卸载：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 监听 transitionend 事件，或用 setTimeout（时间需与 CSS transition-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 值

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！