必须用translate-x-full而非translate-x-[-100%]，因后者依赖父容器宽度计算，而fixed定位抽屉的父容器常无明确宽，导致偏移不准；100vw是视口单位，更可靠。
直接用 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 right-0 h-screen w-64 translate-x-full transition-transform duration-300 ease-in-out - 别只写
transition或transition-all：transition默认包含所有属性，transition-all会意外过渡opacity或scale，拖慢性能 - 动画曲线建议用
ease-in-out或自定义cubic-bezier(.25,.46,.45,.94)，比linear更自然
移动端滑入无动画？检查这三处
translate-x-0 本身是静态值，不触发过渡。CSS 过渡需要明确的「起始态 → 终止态」变化，且两个状态都得有可动画属性（如 transform），同时还得配 transition 声明。
- 初始态不能是
translate-x-0，得是translate-x-full（右抽屉）或-translate-x-full（左抽屉） -
duration-300只设时长，不带transition-property，动画不会动；务必搭配transition-transform - 别依赖
hidden/block切换：这会触发重排，且和translate动画冲突；坚持用transform+transition这一条路径
遮罩层点击失效？大概率是层级或尺寸没对齐
遮罩层（.drawer-overlay）必须和抽屉同级、置于其前，并撑满视口：fixed inset-0 bg-black/50。若点击后无响应，先确认它是否被其他元素遮挡或 z-index 过低。
- 遮罩层需设
pointer-events-auto（默认即可），但抽屉内容内按钮等要加@click.stop（Vue）或event.stopPropagation()（原生 JS），否则点击内部元素会冒泡触发遮罩关闭 - 抽屉自身必须设
overflow-y: auto和min-height: 100vh（或h-screen），否则内容一多就撑出屏幕 - body 锁滚动不能只靠
overflow-hidden；iOS Safari 15+ 常忽略它，正确做法是抽屉打开时给body加 class，CSS 中写：.drawer-open { position: fixed; width: 100%; height: 100%; overflow: hidden; }
最易被忽略的是：抽屉容器没设固定宽（如 w-64）或没配合 fixed 定位，导致 translate-x-full 的“全”失去参照；其次是动画类没写在元素自身上，而是堆在父容器或全局样式里，结果过渡完全不触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
