用 transform: translatex() 配合 transition 实现侧边栏抽屉效果最轻量高效，需设 position: fixed/absolute、避免 overflow: hidden 和 display: none 干扰，并注意移动端滚动锁定与响应式适配。
怎么用 transform 和 transition 把侧边栏“抽”出来
靠 transform: translateX() 移动元素位置，配合 transition 控制滑动过程，是最轻量、兼容性好、不触发重排的方案。别用 left 或 margin-left 动画——会强制浏览器频繁计算布局，卡顿明显。
常见错误现象：transform 写对了但没动，大概率是父容器 overflow: hidden 没加，或者菜单初始状态被 display: none 锁死了（display 无法过渡）。
-
transform: translateX(-100%)是默认收起状态（完全左移一个自身宽度） - 展开时设为
transform: translateX(0)，配合transition: transform 0.3s ease - 必须给菜单加
position: fixed或absolute，否则影响文档流，页面内容会跳 - 移动端要注意：收起时若保留滚动条，得额外处理
body的overflow
为什么不能只靠 max-height 过渡实现抽屉效果
max-height 过渡看似简单，实际在侧边栏场景下基本不可用。它依赖预设一个“足够大”的值（比如 max-height: 500px），一旦内容高度超过该值就截断；设太小会撑不开，设太大则动画变慢、失真。
使用场景局限得很死：仅适合高度固定或可预测的极简菜单。真实项目里菜单项常动态增减，或含折叠子项，max-height 会直接失效。
- 错误写法：
max-height: 0; transition: max-height 0.3s→ 展开后高度突变，无缓动感 - 即使设成
max-height: 100vh，动画时间也不受控，浏览器按“从 0 到 100vh”线性插值，视觉上前面快后面慢 - 更隐蔽的问题：某些安卓 WebView 对
max-height过渡支持异常，会出现闪动或卡在中间态
transform 抽屉菜单的响应式适配要点
PC 端常需要常驻侧边栏，移动端才抽屉化。不能靠 JS 切换 class 去“模拟”响应式，要用纯 CSS 媒体查询控制行为，否则横竖屏切换时状态错乱。
关键在分离“定位方式”和“位移逻辑”：移动端用 fixed + translateX，PC 端直接取消位移、设为 static 定位并显示。
- 移动端断点内：菜单保持
position: fixed，用transform控制显隐 - PC 断点外：覆盖为
position: static，transform: none，同时移除transition（避免鼠标悬停等意外触发） - 遮罩层（
overlay）必须单独写媒体查询：移动端显示、有opacity过渡；PC 下display: none，别用opacity: 0配transition，否则影响点击穿透
触摸设备上滑动手势与抽屉冲突怎么办
用户在抽屉菜单里上下滑动时，如果页面本身可滚动，容易误触到背后的主内容，造成“菜单跟着页面一起滑”的错觉。这不是 bug，是浏览器默认允许穿透滚动。
核心解法是：菜单展开时，给 body 加 overflow: hidden，但必须小心处理滚动位置记忆和恢复。
- 展开菜单前，先记录
document.body.scrollTop，存到变量或data-属性里 - 展开时设
body { overflow: hidden; position: fixed; width: 100%; top: -scrollTopValue + "px" } - 收起后还原
body.style.top = ""，再body.scrollTop = savedScrollTop - 别用
touch-action: none粗暴禁用——它会干掉所有手势，包括菜单内的按钮点击和输入框聚焦
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
