侧边栏抽屉首选 transform:translateX 因其不触发重排、支持硬件加速且动画流畅；需搭配 will-change 或 overflow:hidden 防溢出；结构用 position:fixed，通过 translateX(-100%) 隐藏，transition 写在默认状态；遮罩层须与 sidebar 同级并阻止事件冒泡；还需处理焦点管理、Esc 关闭、body 滚动锁定及移动端 100dvh 适配。
侧边栏抽屉为什么首选 transform:translateX
因为它是唯一能在不触发重排（reflow）的前提下实现平滑位移的 CSS 属性，动画性能远优于 left 或 margin-left。浏览器对 transform 的硬件加速支持成熟，尤其在移动端不会卡顿。但要注意：必须搭配 will-change: transform（仅在需要动画时加）或确保父容器有明确的 overflow: hidden，否则可能看到内容溢出。
基础结构和关键样式怎么写
抽屉本质是「脱离文档流 + 横向位移」，结构上建议用固定定位（position: fixed）避免影响主内容布局：
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100vh;
background: #fff;
box-shadow: 0 0 12px rgba(0,0,0,0.15);
transform: translateX(-100%);
transition: transform 0.3s ease-out;
z-index: 1000;
}
.sidebar.open {
transform: translateX(0);
}
-
transform: translateX(-100%)表示向左移动自身宽度的距离，初始完全隐藏 -
transition必须写在非.open状态上，否则首次打开无动画 - 不要用
display: none控制显隐——它会中断 transition；改用visibility: hidden+opacity: 0配合pointer-events: none做彻底隐藏（如需关闭后释放资源）
点击遮罩层关闭抽屉时的常见 bug
用户常把遮罩层（overlay）和 sidebar 放在同一个父容器里，结果点击 overlay 触发 sidebar 的 click 事件冒泡，导致刚打开就关闭。解决方式很简单：
- 遮罩层和 sidebar 必须是兄弟节点，且 overlay 的
z-index低于 sidebar 但高于主内容 - 在 overlay 的 click 处理函数里加
event.stopPropagation()，或直接用event.target === overlay判断 - 更稳妥的做法：监听
document的click，再用event.composedPath()检查是否点在 sidebar 或 overlay 内部
移动端适配和键盘可访问性容易被忽略
纯 CSS 抽屉默认不可聚焦、无法用 Tab 键操作，对键盘用户和读屏器不友好：
- 给
.sidebar加tabindex="-1"，JS 打开时调用sidebar.focus()，让焦点进入抽屉 - 按
Esc关闭：监听keydown，检查event.key === 'Escape'且 sidebar 当前可见 - 移动端需禁用 body 滚动：打开时设
document.body.style.overflow = 'hidden'，关闭时恢复；注意 Safari 中height: 100vh在地址栏收起/展开时会跳变，建议改用100dvh（支持较新）或 JS 动态计算
真正难的不是位移本身，而是让这个位移在各种设备、各种交互方式下都“不破功”。动画只是表象，焦点管理、滚动锁定、事件隔离才是落地时最常掉坑的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
