overlay不是css属性，需用position、z-index、opacity+visibility组合实现淡出动画；display:none无法过渡，应保持dom存在并用opacity:0+visibility:hidden控制，配合transition和pointer-events:none确保交互安全。
overlay 不是 CSS 属性，也不是 HTML 标准属性 —— 这是常见误解的起点。浏览器根本不识别 overlay 作为样式或属性名，直接写 overlay: true 或 overlay: visible 不会产生任何效果，也不会触发过渡。
真正起作用的是组合策略：用定位（position: fixed 或 absolute）、层级（z-index）、可见性控制（opacity + visibility）和过渡（transition）协同实现“覆盖层淡出”。
为什么不能用 display: none 配合 transition 做退出动画
当元素隐藏时设为 display: none，它会立刻从渲染树中移除，transition 失效 —— 浏览器没有中间状态可插值。你看到的永远是“啪一下消失”，没有淡出过程。
- 正确做法是保持元素在 DOM 中、不脱离文档流，仅通过
opacity: 0和visibility: hidden控制视觉呈现 -
visibility: hidden确保元素不可见且不响应点击，但保留占位（这点比display: none更可控） - 必须同时设置
transition: opacity 0.3s ease, visibility 0.3s—— 否则visibility变化仍是瞬时的
overlay 元素的典型退出动画结构
假设你有一个遮罩层 .overlay，默认显示，点击关闭按钮后需淡出并隐藏：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 初始状态：
opacity: 1; visibility: visible; - 退出类（如
.overlay--exiting）：opacity: 0; visibility: hidden; - CSS 中必须声明：
.overlay { transition: opacity 0.25s ease, visibility 0.25s; } - JavaScript 触发时，先加退出类，**不要立即 removeClass**；等 transition 结束后再清理（可用
transitionend事件监听）
示例关键代码：
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.7);
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease, visibility 0.25s;
}
.overlay--exiting {
opacity: 0;
visibility: hidden;
}
容易被忽略的 pointer-events 和 z-index 冲突
退出动画期间，如果用户误点到刚变透明但尚未 visibility: hidden 的 overlay，可能仍会拦截点击 —— 尤其当它盖在可交互按钮上方时。
- 安全做法：在
.overlay--exiting中追加pointer-events: none;，确保过渡中不响应任何鼠标事件 -
z-index必须显式设置（比如z-index: 1000），否则某些浏览器（特别是 Safari）在opacity: 0时可能降级图层合成，导致底层内容意外穿透或动画卡顿 - 避免用
z-index: auto或依赖默认 stacking context，叠加顺序必须可预测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
