transition 对 display:none 无效，因 display 是离散属性无法插值；应改用 visibility+opacity 组合实现淡入淡出，并注意 z-index、position、pointer-events 及 transitionend 过滤等实战要点。
transition 为什么对 display:none 无效
因为 display 是离散属性，浏览器无法插值计算 display: none 到 display: block 的中间状态，transition 直接跳变，看不到动画效果。想淡入淡出，必须让元素始终参与渲染流，不能靠 display 控制显隐。
visibility + opacity 是最稳的组合
visibility 控制是否响应事件和占据空间，opacity 控制透明度；两者都支持过渡，且语义清晰。关键在于：先设 visibility: visible 和 opacity: 1，再用 transition 同时过渡两个属性。
- 遮罩层默认用
visibility: hidden; opacity: 0;，并设transition: visibility 0.1s, opacity 0.3s; - 显示时加类（如
.show）：visibility: visible; opacity: 1; - 隐藏时移除该类，过渡自动反向执行
- 别把
visibility的过渡时间设太长，否则会残留不可点但不可见的“幽灵层”
z-index 和 position 必须配齐
全屏遮罩要盖住一切，position: fixed 是底线，top: 0; left: 0; width: 100vw; height: 100vh; 是基本尺寸。如果页面有其他 fixed 或 absolute 元素 z-index 很高，遮罩的 z-index 至少得设到 9999 级别才保险——不是玄学，是真实项目里被弹窗、导航栏、广告位压过的血泪经验。
- 务必写
position: fixed;，不用absolute，避免滚动后错位 -
width: 100vw; height: 100vh;比100%更可靠，尤其在 body 有 padding 或缩放时 - 加
pointer-events: none;到遮罩本身，再在内部子元素（如关闭按钮）上设pointer-events: auto;，避免误锁交互
transitionend 事件监听要防重复触发
当遮罩淡出完成，常需清理 DOM 或重置状态。但 transitionend 在 opacity 和 visibility 上各触发一次，容易执行两遍逻辑。必须用 event.propertyName === 'opacity' 做过滤，或者直接监听 opacity 变化。
立即学习“前端免费学习笔记（深入）”；
- 只监听
opacity：el.addEventListener('transitionend', (e) => { if (e.propertyName === 'opacity') { /* 隐藏后操作 */ } }); - 移除监听前记得用
removeEventListener，否则内存泄漏 - 如果用 CSS 类控制显隐，别在
visibility: hidden后立刻remove()元素——动画还没结束，DOM 就没了，transitionend永远不会触发
实际项目里最容易漏的是 pointer-events 配置和 transitionend 的属性过滤。前者导致用户点不到背后的按钮，后者让回调执行两次，状态错乱。这些都不是“理论上可行”，而是上线后立刻暴露的问题。
