必须用 translate-x-full 而非 translate-x-[-100%]，因百分比依赖父宽而 fixed 定位下父宽常未定义，导致偏移不准；100vw 是视口单位更可靠，右抽屉用 translate-x-[100vw]，左抽屉用 -translate-x-[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 left-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 声明。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 初始态不能是
translate-x-0，得是translate-x-[-100%]或translate-x-[-280px]（取决于侧边栏宽度） -
duration-300只设时长，不带transition-property，动画不会动；务必搭配transition-transform - 别依赖
hidden/block切换：这会触发重排，且和translate动画冲突；坚持用transform+transition这一条路径
遮罩层点击失效？大概率是层级或尺寸没对齐
蒙层（overlay）需正确层级与尺寸，否则点不到或误触背景元素。
-
.overlay必须设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不能用100%（它相对于父容器） -
z-index要高于侧边栏（如侧边栏z-50，遮罩设z-40），但低于系统级弹窗 - 遮罩层需加
background-color: rgba(0,0,0,0.5)，透明度太低（如0.1）会导致点击穿透 - JS 关闭逻辑里，建议监听
.overlay的click，而不是document，避免事件冒泡干扰
最易被忽略的是：侧边栏容器若嵌套在某个 overflow: hidden 的父容器里，translate-x-full 位移后可能直接被裁掉——结果是“动了但看不见”。务必检查布局根元素或最近的定位祖先是否意外加了溢出限制。
