根本原因是遮罩元素的opacity未配合过渡动画或被JS内联样式覆盖需在基础选择器声明transition用类切换opacity和pointer-events并确保遮罩占满视口、z-index合理、Safari下启用will-change优化。抽屉打开时遮罩不渐变只闪一下根本原因是遮罩元素的 opacity 没有配合过渡动画或者过渡被覆盖。CSS 里必须同时声明 transition 和初始/目标状态的 opacity且不能依赖 JS 直接写 style.opacity 覆盖——那会跳过 CSS 过渡。实操建议立即学习“前端免费学习笔记深入”遮罩元素如 .overlay初始设为 opacity: 0; pointer-events: none;抽屉打开时给遮罩加一个类如 .overlay--active里面写 opacity: 0.6; pointer-events: auto;必须在 .overlay 基础选择器里写 transition: opacity 0.3s ease;不能只写在 --active 类里避免用 visibility: hidden / visible 控制显隐——它不触发 opacity 过渡移动端点击遮罩无法关闭抽屉常见于遮罩层没占满视口或 z-index 被其他元素压住导致事件穿透不到遮罩本身。实操建议立即学习“前端免费学习笔记深入”遮罩元素需设 position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;不用 100%可能因父容器高度不足而失效确认遮罩的 z-index 高于抽屉内容但低于抽屉头部如有固定标题栏典型值遮罩 z-index: 999抽屉主体 z-index: 1000确保遮罩没有 pointer-events: none 遗留比如从关闭态直接移除类没重置JS 关闭逻辑建议监听遮罩的 click而不是 document避免误触抽屉在 Safari 上滑入卡顿或闪白Safari 对 transform opacity 同时过渡的合成层处理较敏感尤其当抽屉含图片、阴影或复杂子元素时。 MacsMind 电商AI超级智能客服