应作用在 transform 和 opacity 上，而非 width；因 width 触发重排且无法硬件加速，而 transform + opacity 可启用 GPU 加速、避免卡顿，并配合 will-change 或 translateZ(0) 强制合成层。
transition 要作用在 width 还是 transform 上？
抽屉菜单的“无缝”关键不在动效多炫，而在浏览器能否硬件加速 + 避免重排。直接对 width 做 transition 看似直观，但会触发 layout（重排），尤其当菜单里有文字、图片或 flex 子项时，容易卡顿、掉帧，且无法利用 GPU 加速。
更稳妥的做法是只对 transform 和 opacity 过渡：
- 用
transform: translateX()控制左右位移（横向抽屉）或translateY()（纵向） - 用
opacity配合实现淡入淡出，增强“浮现感” - 初始状态设为
transform: translateX(-100%)（完全左移），展开时变为translateX(0)
注意：必须给抽屉容器加 will-change: transform（仅在需要时启用），或更稳妥地始终设置 transform: translateZ(0) 来强制开启合成层。
如何让 backdrop 遮罩和菜单同步过渡？ 遮罩层（backdrop）常被忽略同步时机，导致菜单已滑出但遮罩还透明，或遮罩先消失菜单卡住。
正确做法是把菜单和 backdrop 放在同一父容器内，并共用同一个控制类（如 .drawer-open），然后分别定义过渡：
.drawer {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.backdrop {
transition: opacity 0.3s ease-out;
}
.drawer-open .drawer {
transform: translateX(0);
}
.drawer-open .backdrop {
opacity: 1;
}
关键点：
- 不要用
display: none/block切换 backdrop，它不支持过渡；改用opacity+pointer-events: none控制交互 -
cubic-bezier(0.34, 1.56, 0.64, 1)是常用“缓出过冲”曲线，比ease-in-out更有抽屉的“弹出感”，且避免生硬停顿
移动端点击穿透和 focus 状态怎么防？ 抽屉展开后，若用户误点到背后内容，可能触发下层按钮（比如页面上的购物车图标），这是典型的 pointer-events 穿透问题。
解决方案不是靠 JS 拦 click，而是纯 CSS 控制层级与事件流：
- 抽屉容器和 backdrop 必须有足够高的
z-index（例如z-index: 1000） - backdrop 元素必须设置
pointer-events: auto（默认是 auto，但确保没被覆盖） - 抽屉内部可聚焦元素（如
input、button）需在打开时自动focus()，否则键盘用户无法操作；但 focus 样式要配合outline: none+ 自定义box-shadow保持可访问性
另外，iOS Safari 对 transform + fixed 容器有渲染 bug：抽屉若设 position: fixed，滑动时可能闪烁。此时应改用 position: absolute + 手动监听 scroll 并重置 top/left，或用 position: sticky 配合父容器 overflow-hidden。
transitionend 事件监听为什么总漏触发？
JS 中监听 transitionend 来收尾（比如关闭后清理 class、恢复 body scroll）时，经常漏掉，尤其在快速连续开关抽屉时。
根本原因是：
- 同一元素上多个可过渡属性（如
transform和opacity）会触发多次transitionend，但你只关心“整体完成” - 浏览器可能因样式重写、强制 reflow 提前终止过渡，导致事件不触发
建议写法：
- 只监听具体属性：
el.addEventListener('transitionend', (e) => { if (e.propertyName === 'transform') { / done / } }) - 加一层防抖：用
setTimeout设置兜底回调（如 350ms），避免无限等待 - 关闭抽屉前，先移除所有过渡 class，再重置 transform，最后再加回 transition class —— 避免浏览器复用旧过渡状态
抽屉动画看似简单，真正难的是在各种设备、各种嵌套布局、各种用户操作节奏下保持稳定响应。最易被忽略的，其实是 transform 的合成层管理与 backdrop 的 pointer-events 时序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
