抽屉动画推荐用 transform: translateX() 而非 position: fixed，因其不脱离文档流、不受 overflow 截断、硬件加速更平滑；需设 position: absolute/fixed 为容器，动画由 transform 驱动，并加 will-change: transform 防闪屏，关闭时清空 transform。
抽屉用 position: fixed 还是 transform？选后者更稳妥
直接用 position: fixed 拉出抽屉看似简单，但容易和页面滚动、overflow: hidden 父容器、iOS Safari 的 viewport 缩放行为冲突，导致抽屉卡住或无法滚动。实际项目中更推荐用 transform: translateX() 配合 transition 控制显隐——它不脱离文档流，不受父级 overflow 截断，且硬件加速更平滑。
关键点：
- 抽屉容器设
position: absolute或fixed，但动画靠transform驱动，不是left/right - 必须加
will-change: transform（尤其在 iOS 上防闪屏） - 关闭时记得清空
transform，别只靠 class 切换，否则可能残留内联样式干扰后续打开
aria-modal="true" 和 inert 怎么配着用才真禁用背景？
光加 aria-modal="true" 不会自动禁用背景交互，屏幕阅读器能识别模态状态，但键盘 Tab 仍能进背景表单、鼠标点击照样生效。必须手动处理：
- 抽屉打开时，给
加inert属性（现代浏览器支持），或退化方案：遍历所有可聚焦元素（button、input、[href]等）临时加tabindex="-1"并移除focus事件监听 - 抽屉关闭后，立刻移除
inert，并恢复所有元素的原始tabindex值（不能硬写死为0，有些原本是-1或未设） - 务必监听
Escape键，且focus要落回触发抽屉的按钮上，否则键盘用户会迷失
表单提交后抽屉不自动关闭？检查 event.preventDefault() 和状态同步
常见现象：点「保存」按钮，接口返回成功，但抽屉还开着，且再次点击报错「Cannot read property 'value' of null」。根本原因是表单提交触发了默认跳转或页面重载，或者 React/Vue 中状态没及时更新，导致抽屉组件销毁前还在读取已卸载 DOM。
- 原生 HTML 表单必须加
onsubmit="event.preventDefault(); saveForm(); return false;"，漏掉return false在某些浏览器里仍会提交 - 框架中（如 Vue），确保
saveForm()是 async 函数，且.then(() => { isDrawerOpen = false; })放在接口 resolve 之后，而不是await外层 - 抽屉关闭动画结束前，不要立刻销毁内部表单组件——用
setTimeout(() => { clearForm(); }, 300)（300 对应 CSS transition 时间）比直接清空更安全
移动端键盘弹起顶飞抽屉？用 resize 监听 + scrollIntoView 补救
iOS Safari 键盘弹出会触发 window.resize，但抽屉高度没重算，导致输入框被盖住；Android 则常把整个抽屉往上推，露出空白底色。不能依赖 viewport-height，得动态响应：
- 监听
window.addEventListener('resize', () => { if (drawerOpen) drawerEl.scrollIntoView({ block: 'nearest' }); })，强制滚动到可见区域 - 抽屉内部第一个
input聚焦时，用inputEl.scrollIntoView({ behavior: 'smooth', block: 'center' })微调位置 - 避免在抽屉里用
height: 100vh，改用max-height: 80vh+overflow-y: auto，给键盘留出空间
抽屉不是“加个 div 再 show/hide”就完事，焦点管理、键盘适配、状态生命周期这三块，漏一个就会让用户在表单中途卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
