translatex()是移动端侧边抽屉动画唯一可靠方案，因其触发gpu加速，避免left/margin等引发的强制重排和ios黄警告；需配合精确transition声明、body滚动锁定及遮罩层同步处理。
用 transform: translateX() 配合精确的 transition 声明，是让移动端侧边抽屉过渡自然的唯一可靠路径。其他方式（比如 left、margin-left 或 max-height）在真机上大概率卡顿、跳帧或触发 iOS 黄警告。
为什么 translateX() 是硬性要求，不是“推荐”
移动端浏览器（尤其是 iOS Safari 和低端安卓 WebView）对 transform 和 opacity 属性做了深度 GPU 加速优化，而 left、margin-left 等会强制触发 layout（重排），动画一动就掉帧。DevTools 里看到的黄色 “Forced synchronous layout” 警告，90% 来自这里。
-
translateX(-100%)表示完全滑出视口左边界，计算基于自身宽度，不依赖父容器定位上下文 - 别混写
left: 0和transform: translateX(-100%)—— Safari 有时会把位移解析为 0 - 初始状态必须是
transform: translateX(-100%)，不能是display: none或visibility: hidden，否则transition直接失效
transition 必须写在默认状态，且只针对 transform
动画不生效？八成是把 transition 写错了位置。CSS 过渡只在属性值变化时插值，浏览器得提前“知道你要过渡什么”。
- 正确：
.drawer { transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } - 错误：
.drawer.open { transition: transform 0.35s; }—— 关闭时无动画，突变 - 绝对不要写
transition: all 0.35s，无关属性（如color）参与过渡会拖慢性能 - 贝塞尔曲线选
cubic-bezier(0.34, 1.56, 0.64, 1)比ease-in-out更接近 iOS 原生手感：前缓后略带惯性回弹
遮罩层和 body 滚动锁定必须同步处理
抽屉弹出后背景还能滑动、松手回弹、点遮罩误触背后按钮——这些都不是动画问题，而是交互层没封严。
- 给
document.body动态加.no-scroll { overflow: hidden; height: 100vh; overscroll-behavior: contain; }，打开即加，关闭即删（别等transitionend） - 遮罩层
.overlay必须是position: fixed、width: 100vw、height: 100vh，z-index严格低于抽屉（如抽屉z-index: 1001，遮罩z-index: 1000） - 遮罩的
transition要单独写：.overlay { opacity: 0; pointer-events: none; transition: opacity 0.35s, visibility 0.35s; }——visibility不声明时长，切换瞬间消失会导致点击穿透 - 监听遮罩层关闭，用
touchend而非click，避免 300ms 延迟和手势冲突
容易被忽略的细节：will-change 和 width
这些不是“锦上添花”，而是 iOS Safari 和旧安卓 WebView 上动画顺滑与否的临界点。
- 抽屉容器必须设明确
width（如width: 280px），否则translateX(-100%)会按父容器算，flex 布局下极易偏差 - 打开抽屉瞬间动态加
will-change: transform，关闭后设回auto—— 对复杂 DOM 或长列表有实际提升，但别常驻，否则内存开销上升 - 抽屉内容区（如
.drawer-content）别设overflow: hidden，iOS Safari 会截断动画中的元素 - 主内容区（
.main）的transition必须和抽屉完全一致，否则视觉错位
真正卡顿的根源，往往不在动画本身，而在 body 锁定时机、遮罩层事件穿透、或 transition 声明位置错误。这些点只要漏一个，用户手指一划，体验就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
