根本原因是遮罩元素的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 同时过渡的合成层处理较敏感，尤其当抽屉含图片、阴影或复杂子元素时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给抽屉容器加
will-change: transform;（仅打开前一刻动态添加，关闭后移除，避免常驻影响性能） - 避免在抽屉内用
box-shadow或大量filter；如需阴影，改用伪元素 +backdrop-filter（iOS 15+）或简化为 border - 不要对
height或width做过渡——改用transform: translateX()移动，强制 GPU 加速 - 遮罩的
background-color推荐用 rgba 值（如rgba(0,0,0,0.6)），别用hsla或透明 PNG，Safari 渲染更稳
响应式断点下抽屉行为不一致
桌面端想常驻显示（不抽屉），移动端才弹出；但媒体查询没覆盖所有状态，或 JS 判断窗口宽度时机不对，导致切换时残留遮罩或抽屉错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案优先：用
@media (min-width: 768px)把抽屉设为display: block; transform: translateX(0);，遮罩display: none; - 如果必须用 JS 控制（比如要监听 resize 并开关类），务必节流，且在 resize 结束后检查
window.innerWidth，再同步 DOM 状态 - 避免在 CSS 中对同一属性既写媒体查询又写 JS 内联样式——内联样式优先级高，会覆盖媒体查询
- 抽屉宽度建议用
max-width: 320px或width: 80vw，别用固定px值，适配折叠屏或 zoom 场景
最易被忽略的是遮罩的 pointer-events 状态和 transition 的声明位置——它们不出现在视觉效果里，但只要漏掉一个，整个交互动效就退化成“开关灯”式硬切。
