侧边栏平移首选 transform: translateX() 因其触发硬件加速、不触发重排且不影响文档流；需配合 fixed/absolute 定位、class 控制显隐、aria 属性同步可访问性，并注意 backdrop 层级与移动端适配。
侧边栏平移为什么首选 transform: translateX()
因为 transform 触发硬件加速，动画更流畅，且不触发重排（reflow），比改 left 或 margin-left 性能好得多。用 translateX() 移动侧边栏时，元素仍在文档流原位置（视觉上偏移），所以主内容区无需手动调整宽度或 margin —— 只要侧边栏是 position: fixed 或 absolute，就不会挤占主内容空间。
常见错误是给侧边栏加 transition: left 0.3s 后发现卡顿，或主内容区跟着一起“晃”，本质就是没用对定位方式和 transform 组合。
- 侧边栏必须设
position: fixed（全屏抽屉）或position: absolute（局部抽屉），否则translateX()会和其他布局属性冲突 - 不要同时写
left和transform，浏览器会按规范合并计算，但行为难预测；只靠transform控制位移 - 移动端要注意
touch-action: none防止滑动时触发页面滚动
如何用 class 切换控制显隐状态
最轻量的做法是定义两个 class：.sidebar-open 表示展开（translateX(0)），.sidebar-closed 表示收起（translateX(-100%) 或具体像素值）。用 JavaScript 切换 class 即可，CSS 负责过渡动画。
注意：收起时的位移值建议用 -100% 而非 -300px，这样适配不同宽度设备；但如果侧边栏宽度是固定值（如 width: 280px），用 translateX(-280px) 更精准，避免百分比在某些嵌套容器下计算偏差。
立即学习“前端免费学习笔记（深入）”；
- 务必给侧边栏加
transition: transform 0.3s ease-in-out，不能只写transition: all，否则可能把 color、opacity 等无关属性也加入动画 - 初始状态推荐设为
.sidebar { transform: translateX(-100%); }，再通过 JS 添加.sidebar-open触发展开，避免页面加载时侧边栏闪现 - 如果侧边栏有 backdrop（遮罩层），它的
transition应单独设opacity，别和 transform 混在一起
点击遮罩层关闭时的边界问题
用户常遇到：点遮罩层（.backdrop）能关侧边栏，但点侧边栏内部区域却关不掉——这是因为事件冒泡被侧边栏内容拦截了。解决方案不是阻止冒泡，而是确保 .backdrop 层级高于侧边栏，且监听区域完整覆盖。
典型结构是：<div class="backdrop"></div>
<aside class="sidebar"></aside>，两者同级，.backdrop 的 z-index 必须比 .sidebar 小（比如 z-index: 99 vs z-index: 100），这样点击才优先命中 backdrop；若反过来，点击永远落在 sidebar 上。
- 给
.backdrop加cursor: pointer，方便识别可点击区域 - 移动端需补
touch-action: manipulation，防止 Safari 延迟 300ms 点击响应 - 不要用
pointer-events: none在 sidebar 上试图“透传”点击——这会让内部按钮、链接全部失效
键盘与屏幕阅读器支持不能只靠 CSS
transform 平移本身不影响可访问性，但显隐状态变化需要同步更新 aria-hidden 和 inert 属性。仅靠 CSS 切换 class，屏幕阅读器不会感知侧边栏是否打开。
例如：侧边栏展开时，应设 aria-hidden="false" 且移除 inert；收起时设 aria-hidden="true" 并加 inert（或用 display: none 配合 JS 控制，但后者会破坏 transition 动画）。
- 键盘焦点必须在打开时自动跳入侧边栏首个可聚焦元素（如第一个
<button></button>），关闭时返回触发按钮 - 按
Escape键应关闭侧边栏，需监听document.addEventListener('keydown', ...)，注意判断当前侧边栏是否 visible - 不要依赖
visibility: hidden或opacity: 0来隐藏——它们仍会被读屏软件读取
overflow-y: auto，导致长列表撑出视口；或者 backdrop 点击区域没铺满整个 viewport（比如漏了 height: 100vh），底部留白点不关闭。这些都不是动画问题，但会让效果“看起来坏了”。 
