根本原因是遮罩元素的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超级智能客服
相关推荐
享客多网络2 小时前
2026年蓟州区GEO软件公司如何引领科技创新潮流weixin_458580122 小时前
如何在网页中完整展示数组中所有对象的全部属性木易 士心2 小时前
云数据库 Clouder 认证：SQL 基础开发与应用题型分析2403_883261092 小时前
PHP源码能否在Chromebook上运行_ChromeOS硬件限制说明【解答】djjdjdjdjjdj2 小时前
golang如何编写DNS查询工具_golang DNS查询工具编写大全架构师老Y2 小时前
003、Prompt设计原则：清晰、具体、结构化万粉变现经纪人2 小时前
如何解决 pip install bitsandbytes 报错 仅支持 Linux+glibc（macOS/Windows 失败）问题小何code2 小时前
【Python零基础入门】第6篇：Python字符串入门：创建、索引与切片·云扬·2 小时前
从0到1理解分库分表：我踩过的坑与实战经验