CSS全屏遮罩淡入消失实现方法

本文深入解析了CSS全屏遮罩实现平滑淡入淡出效果的核心技巧与实战避坑指南：由于display属性不支持过渡动画，必须改用visibility与opacity组合方案，并强调position: fixed、100vw/vh尺寸、足够高的z-index、pointer-events的精细控制，以及transitionend事件中针对opacity的精准过滤，所有建议均源于真实项目中反复踩坑后验证有效的关键经验，帮你一次性避开隐藏层残留、交互失灵、回调重复执行等高频线上问题。

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 的属性过滤。前者导致用户点不到背后的按钮，后者让回调执行两次，状态错乱。这些都不是“理论上可行”，而是上线后立刻暴露的问题。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。