移动端抽屉导航需用 transform: translatex() + will-change: transform 实现 gpu 加速，避免重排卡顿；须动态设置 will-change、禁用滚动穿透、适配减少动画，并确保合成层独立。
移动端抽屉导航的 transform + will-change 是关键
纯靠 left 或 margin-left 动画会触发重排，滑动卡顿明显。必须用 transform: translateX() 配合 will-change: transform 强制 GPU 加速。但要注意：will-change 不是万能开关，只应在动画开始前 1–2 帧设置，动画结束立即移除，否则长期占用 GPU 内存。
实操建议：
- 抽屉容器设
position: fixed或absolute，避免影响文档流 - 初始状态用
transform: translateX(-100%)（完全隐藏），非display: none—— 后者会清空渲染树，后续动画无法触发硬件加速 - 过渡用
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，这个贝塞尔曲线比ease-out更跟手 - 在 JS 触发展开前加
element.style.willChange = 'transform'，收起后设为'auto'
避免 iOS Safari 滚动穿透与 touch 事件冲突
iOS 上抽屉展开时，背景页面仍可滚动，且 touchstart 可能误触发 body 滚动，导致抽屉“抖一下”。这不是 CSS 能单独解决的问题，但 CSS 需配合 JS 行为。
实操建议：
- 抽屉激活时，给
加 classno-scroll，并设overflow: hidden; height: 100vh; position: fixed; width: 100%（注意：仅 iOS 需要position: fixed，Android 用overflow: hidden即可） - 抽屉内滚动区域（如长菜单）必须设
-webkit-overflow-scrolling: touch，否则 iOS 惯性滚动失效 - 禁止
touchmove冒泡到 body：抽屉根元素加touch-action: pan-y，限制仅允许竖向拖拽，横向滑动留给抽屉关闭手势
用 prefers-reduced-motion 适配系统动效偏好
部分用户在系统设置中开启“减少动画”，此时硬编码的 0.3s 动画反而造成体验割裂。CSS 提供原生支持，无需 JS 判断。
实操建议：
- 用媒体查询包裹动画声明：
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } } - 不要只关
transition，也需处理 JS 中的requestAnimationFrame动画逻辑，确保视觉状态同步 - 测试方式：macOS 系统设置 → 辅助功能 → 显示 → 减少运动；iOS 设置 → 辅助功能 → 动态效果 → 减少动态效果
动画卡顿排查：从渲染层看三个常见漏点
即使用了 transform，仍可能卡顿。问题常出在渲染管线前端——不是动画写得不对，而是其他样式干扰了合成层判断。
实操建议：
- 检查抽屉是否被父容器设置了
overflow: hidden且父容器有border-radius：这会阻止该元素成为独立合成层，强制回退到 CPU 渲染 - 确认没有使用
filter（如drop-shadow）、opacity小于 1、或backdrop-filter—— 这些都会让浏览器放弃将抽屉提升为合成层 - 避免在抽屉上使用
box-shadow的模糊值过大（> 8px），iOS WebKit 对大模糊阴影合成性能极差；改用伪元素 +transform: scale()模拟更稳
抽屉动画真正的难点不在“怎么动”，而在于“不动的时候别拖后腿”——任何看似无关的样式都可能让整个图层降级。动手前先打开 Chrome DevTools 的 Layers 面板，确认抽屉是否真的作为独立合成层存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
