必须用 translate-x-full 而非 translate-x-[-100%]，因百分比依赖父容器宽度，而 fixed 定位下父宽常未定义导致偏移不准；100vw 是视口单位，更可靠，左抽屉用 -translate-x-full，右抽屉用 translate-x-full，初始位移与 transition-transform 必须显式共存才生效。
直接用 translate-x-full + transition-transform 就能跑通，别碰 left、margin-left 或 opacity 模拟位移——动画卡、兼容差、还容易漏出边缝。
为什么必须用 translate-x-full 而不是 translate-x-[-100%]
百分比值（%）依赖父容器宽度计算，而侧边栏通常是 position: fixed，父容器可能没设宽，导致偏移不准；100vw 是视口单位，更可靠。Tailwind 的 translate-x-full 编译为 transform: translateX(100%)，但实际生效时仍受上下文影响。所以移动端右抽屉推荐显式写 translate-x-[100vw]（用任意值包裹方括号可绕过预设限制），左抽屉用 translate-x-[-100vw]。
- 默认隐藏状态：右抽屉加
translate-x-full，左抽屉加-translate-x-full - 打开状态统一用
translate-x-0，别写translate-x-[0px]——后者不触发硬件加速 - 如果用了
sm:translate-x-full响应式类，记得在桌面断点里覆盖掉：比如@media (min-width: 640px) { .sidebar { transform: translateX(0); transition: none; } }
transition-transform 必须配初始 transform 值
只写 transition-transform 不生效——浏览器需要明确的起始 transform 才能插值。哪怕初始是 translate-x-0，也得显式写出，不能靠继承或默认值。
- 侧边栏容器必须带初始位移类，例如：
fixed top-0 left-0 h-screen w-64 -translate-x-full transition-transform duration-300 ease-in-out - 别只写
transition或transition-all：前者默认包含所有属性，后者会意外过渡opacity或scale，拖慢性能 - 动画曲线建议用
ease-in-out或自定义cubic-bezier(.25,.46,.45,.94)，比linear更自然
遮罩层和 body 滚动锁怎么配才不翻车
遮罩层（overlay）点击关闭失败、背景还能滚动、Safari 下闪滚动条——这些问题基本都出在遮罩和 body 控制上。
- 遮罩层必须是
fixed inset-0 bg-black/50 z-40，且监听点击要绑在它自身，不是 document（除非你用 label + checkbox 方案） - 打开时执行
document.body.style.overflow = 'hidden'，关闭时设为''（空字符串），不是'auto'，否则 Safari 会短暂闪出横向滚动条 - 如果项目用了第三方 UI 库（如 Ant Design），它可能偷偷改了
body.style.paddingRight，关闭后得手动清空：document.body.style.paddingRight = '' - 遮罩层不要设
z-index过高（比如 9999），和侧边栏保持同级或略低即可，避免压住全局 toast/modal
移动端手势滑动关闭只能靠 JS，但动画仍可交给 CSS
CSS 本身不处理 touchmove，但你可以把位移控制权交还给 CSS，JS 只做距离读取和阈值判断。
- 监听
touchstart记下起始 X 坐标，touchmove中用requestAnimationFrame动态设置侧边栏的style.transform = translateX(${x}px) - 松手（
touchend）后，若位移超过 50px，补全到translateX(0)；否则回弹到translateX(-100vw) - 整个过程只改
transform和opacity，别碰width、height、margin，否则掉帧 - 调试时临时加
outline: 1px solid red看真实边界，尤其当 emoji 或中文字体撑宽内容时
真正容易被忽略的是：侧边栏容器必须设 box-sizing: border-box（Tailwind 默认不设），否则 padding/border 会让实际宽度超出 w-64，位移后右边露缝；还有就是 will-change: transform 别常驻，只在拖拽中动态加、结束立刻移除，不然 Safari 会误判合成层优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
