抽屉动画必须用transform+transition，禁用left/top和display:none：因前者触发重排卡顿，后者导致跳变；初始设translateX(-100%)、opacity:0、visibility:visible，开启时切为translateX(0)、opacity:1，并分写transition-transform和transition-opacity。
抽屉动画必须用 transform + transition，别碰 left/top 或 display: none —— 否则要么卡顿，要么直接跳变，尤其在 iOS Safari 上几乎必现。
为什么抽屉一开就闪一下或根本不动？
常见错误是只加了 transition-transform 类，但没配对起始态和结束态；或者用了 hidden、invisible 这类不可动画的开关方式。
- 初始状态必须是
translate-x-full+opacity-0+visible（确保 DOM 渲染且占位） - 触发打开时，移除
translate-x-full和opacity-0，改为translate-x-0+opacity-100 - 不能写
hidden→block，display属性不支持过渡，浏览器直接跳帧 - 如果用 JS 控制，避免
el.classList.toggle('hidden')，改用el.classList.replace('translate-x-full', 'translate-x-0')
如何让 Tailwind 正确过渡 transform 和 opacity？
这两个属性必须分开声明过渡，否则 timing function 会互相干扰，导致滑入快、淡入慢，或反之。
- 显式加
transition-transform duration-300 ease-in-out控制位移 - 再加
transition-opacity duration-200（时长略短于位移，视觉更紧凑） -
duration-和ease-类必须写在常态元素上，不能只放在hover:或 JS 切换后的类里 - 别用
transition-all：它会把box-shadow、filter也拉进来，低端机易掉帧
移动端 backdrop 点击关闭总误触抽屉内容？
backdrop 和抽屉内容共用一个父容器时，点击按钮或链接会冒泡到 backdrop，触发二次关闭，造成“闪关再开”错觉。
- backdrop 元素必须设
pointer-events-auto（Tailwind 默认是pointer-events-none） - 抽屉内容区域（如
div#drawer-content）加onclick="event.stopPropagation()" - 更稳妥的做法：backdrop 和 drawer 是同级兄弟节点，且 backdrop 的
z-index必须低于 drawer（如z-40vsz-50） - 响应式下，桌面端 backdrop 应设
sm:hidden，避免误绑事件
最易被忽略的是：抽屉容器必须有固定宽度（如 w-64 或 sm:w-80），且不能依赖 flex 自动撑开——否则 translateX() 动画过程中浏览器反复重排，iOS 上滑一半就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
