抽屉弹窗用 left: -100% 不贴边是因为该值相对于父容器宽度计算，若父容器存在 padding、margin 或为 flex/Grid 子项，实际位移不足；需确保父容器为 body 或全屏 relative 容器且无内边距，抽屉自身设 absolute、top: 0、height: 100vh，并统一在默认状态写 transition: left 0.3s ease；移动端须锁 body overflow 和 touch-action，抽屉内加 overscroll-behavior: contain；IE11 应改用 transform: translateX(-100%) 并配 transition: transform。
抽屉弹窗用 left: -100% 为什么经常不贴边？
因为 -100% 是相对于父容器宽度计算的，不是屏幕宽度。如果父容器有 padding、margin 或是 flex/Grid 子项，实际移出距离可能远小于预期，导致弹窗半露或卡在侧边。
- 确保抽屉父容器是
body或设为position: relative的全屏容器（比如div#app），且无内边距 - 抽屉自身必须设
position: absolute，同时明确top: 0、height: 100vh，否则高度塌陷，动画错位 - 避免用
transform: translateX(-100%)混用 —— 它和left同时存在会覆盖过渡效果
transition 写在哪？为什么加了也不动？
必须写在抽屉元素的「默认状态」上（即未激活时），且只对 left 过渡；如果只在激活类里写 transition，浏览器没机会触发重排，动画直接跳变。
- 正确写法：
.drawer { left: -100%; transition: left 0.3s ease; } - 错误写法：只在
.drawer.active { transition: left 0.3s; }里写，无效 - 不要加
transition: all—— 会意外过渡opacity或visibility，造成闪烁或点击穿透
移动端点击穿透和滚动截断怎么破？
抽屉弹出后，底层页面仍可滚动，且 iOS 上常发生点击穿透到背后按钮 —— 根本原因是 body 没锁住，且抽屉没接管 touch 事件流。
- 弹出时给
body加overflow: hidden，同时设touch-action: none防止拖拽穿透 - 抽屉内部需设
overscroll-behavior: contain，阻止滚到底部时触发背景页滚动 - 别依赖
pointer-events: none锁背景 —— 它不阻断 focus/keyboard，也不防 touchstart 穿透
IE11 兼容 left: -100% 动画要改什么？
IE11 对 position: absolute + 百分比 left 的动画支持极差，经常卡住或跳帧，必须降级用 transform。
- 放弃
left，统一用transform: translateX(-100%)和translateX(0) - 过渡属性改写为
transition: transform 0.3s ease - 注意：IE11 下
transform需要-ms-前缀，但现代 autoprefixer 已自动处理，只要确认构建流程开了 IE 支持
抽屉的「边界判定」和「事件拦截」才是真难点，样式只是表象；left: -100% 看似简单，但一嵌套就失效，一换容器就偏移，一上真机就穿透 —— 别急着调动画时长，先盯住容器关系和事件流向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
