过渡效果必须作用在抽屉容器本身，而非内部内容；应给容器（如aside.drawer）加transition: transform 0.3s ease-in-out，配合translatex()实现滑动，避免display: none、尺寸不稳或touch延迟导致动画失效。
transition 该加在抽屉容器还是内部内容上
过渡效果必须作用在抽屉的「容器元素」本身，而不是它里面的 ul 或 nav。因为滑出动作本质是容器的 width、transform 或 left 变化，浏览器只能对这些属性做插值动画。如果只给子元素加 transition，容器瞬间显示/隐藏，子元素再慢慢动，就会出现“闪一下才开始滑”的错觉。
常见错误现象：
点击按钮菜单突然弹出来，然后才滑动；或者关闭时菜单直接消失，没滑回去。
- 正确做法：给抽屉容器（比如
aside.drawer或div#sidebar）加transition: transform 0.3s ease-in-out - 不要写成
nav ul { transition: ... }，这无效 - 如果用
width控制显隐，记得初始设width: 0且overflow: hidden，否则内容会撑开布局
用 transform 还是 left / right 切换更稳妥
transform 是首选，尤其 translateX()。它触发硬件加速，动画更顺，且不影响文档流，不会导致页面重排（reflow）。而直接改 left 或 right 需要容器是 position: relative/absolute，一不小心就和父级定位冲突，还容易因 margin/padding 触发意外重排。
使用场景：
移动端抽屉从左滑入、桌面端侧边栏从右滑出，都适用 transform: translateX(-100%) → translateX(0)。
- 开抽屉：设
transform: translateX(0) - 关抽屉：设
transform: translateX(-100%)（左滑出）或translateX(100%)（右滑出） - 别忘了加
will-change: transform（可选，对长列表或复杂 DOM 有帮助） - 避免用
display: none切换——它会让 transition 失效，必须用visibility: hidden+opacity: 0或纯 transform 控制显隐
为什么菜单滑出一半就卡住或跳变
根本原因通常是 CSS 层叠顺序或尺寸计算冲突。最常见的是：抽屉容器没有固定宽度，或内部内容未限制宽度，导致 transform 动画过程中浏览器反复重算布局；或是 overflow 设置不当，滚动条出现又消失，引发尺寸抖动。
性能影响：
每次重排都会打断动画帧，表现为卡顿、掉帧，尤其在低端安卓机上明显。
- 确保抽屉容器有明确
width（如width: 280px）或max-width - 内部内容用
overflow: auto包裹，而不是让整个抽屉可滚动 - 禁用
box-sizing: border-box的误用——如果 padding 写在容器上，又没计入 width，动画中可能微调 - 检查是否用了
flex布局但没设flex-shrink: 0，导致容器被压缩变形
移动端 touch 操作后 transition 不触发
这不是 CSS 问题，是浏览器在 touch 结束后有一段 300ms 延迟（为双击缩放留空间），导致 JS 修改 class 的时机被滞后，transition 拿不到起始状态变化。简单加 touch-action: manipulation 就能关掉延迟，让 class 切换立刻生效。
兼容性影响：touch-action: manipulation 在 iOS 9.3+ 和 Android Chrome 36+ 都支持，老版本 fallback 用 fastclick 库也行，但多数项目现在可以直接用。
- 加在抽屉容器或触发按钮上：
style="touch-action: manipulation" - 别漏掉伪类状态，比如
.drawer.open:active也可能被延迟影响 - 如果用了
pointer-events: none临时禁用按钮，记得在 transition 结束后恢复，否则后续点击失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
