必须用 translate-x-full 而非 translate-x-96 或 left：因 translate-x-96 是固定单位，响应式差；left 触发重排、动画卡顿且 iOS Safari 报警告；translate-x-full 相对父宽计算，配合 fixed 定位可稳定移出右侧，而百分比（如 -100%）在无宽父容器下失效，100vw 更可靠。
为什么必须用 translate-x-full 而不是 translate-x-96 或 left
因为 translate-x-96 是固定单位（96 × 0.25rem = 24rem），在小屏设备上可能没完全移出视口，大屏又留白过多；left 会触发重排，动画卡顿，iOS Safari 上甚至报“强制降级”警告。而 translate-x-full 是相对父容器宽度计算的，配合 fixed 定位能稳定保证“彻底移出右侧”。注意：父容器若未设宽（如 fixed 元素的父级常为 body 且无显式 width），translate-x-[-100%] 会失效——百分比依赖父宽，100vw 才是视口级可靠单位，右抽屉推荐 translate-x-[100vw]，左抽屉用 -translate-x-[100vw]。
transition-transform 不生效？检查这三处硬性前提
只写 transition-transform 永远不会动。浏览器需要明确的「起始态 → 终止态」插值，缺一不可：
- 侧边栏元素必须带初始位移类，比如
-translate-x-full（隐藏）或translate-x-full（右抽屉） - 必须显式声明
transition-transform+duration-300+ 缓动函数（如ease-in-out），不能只写transition或transition-all——后者会意外过渡opacity或scale，拖慢性能 - 打开时切换到
translate-x-0，别写translate-x-[0px]：前者编译为translateX(0)触发硬件加速，后者是字符串值，不触发 GPU 合成
移动端滑入无动画？大概率是 DOM 状态或遮罩层干扰
常见静默失败场景：
- 初始状态用了
hidden或invisible：这些会中断渲染流，transform动画直接跳过。正确做法是保持visible+opacity-0+translate-x-full - 遮罩层（overlay）点击后抽屉闪一下再关：事件冒泡导致关闭逻辑被重复触发。解决方案是抽屉内容区域加
onclick="event.stopPropagation()"，或在 Vue/React 中用@click.stop - 遮罩层尺寸没填满：必须
fixed inset-0，不能只靠w-full h-full，否则边缘漏点、点击失效 - 滚动锁没配对：打开时执行
document.body.style.overflow = 'hidden'，关闭时设为''（空字符串），不是'auto'，否则 Safari 会短暂闪横向滚动条
响应式断点下如何让侧边栏“小屏抽屉、大屏常驻”？
关键不是加一堆断点类，而是分层覆盖逻辑：
立即学习“前端免费学习笔记（深入）”；
- 结构层：移动端默认隐藏，用
sm:-translate-x-full；中屏开始取消抽屉态，加md:translate-x-0 md:static md:inset-0 - 定位层：
md:static必须配md:inset-0或md:left-0，否则 fixed 的残留样式会让它飘在页面上方 - 层级层：大屏常驻时，侧边栏 z-index 往往要降级（如
md:z-0），否则盖住导航栏或弹窗 - 动画层：桌面端不需要滑入动画，可直接移除所有
transition-类，避免无谓计算
最易错的是顺序反了：写成 sm:translate-x-0 md:-translate-x-full，结果大屏反而隐藏。记住语义——“小屏隐藏”是基线，“大屏覆盖”才是例外。
