用 transform: translateX() 实现侧边栏抽屉最稳定高效，需 fixed 定位、-100%/0 位移、cubic-bezier 弹性过渡、will-change 优化；主内容同步位移或 margin-left 协同；兼顾 ARIA、body 遮罩、双关闭逻辑、touch-action 及断点停动画。
用 transform: translateX() 实现侧边栏抽屉的平滑呼出，是最稳定、性能最优、兼容性最好的方式。它不干扰文档流，不触发重排，动画走 GPU 合成层，低端设备也能保持 60fps。
核心结构与定位必须到位
侧边栏需设为 position: fixed（不是 absolute 或 sticky），确保它始终贴左、不随页面滚动偏移、层级独立、不被父容器 overflow 截断。
- 初始状态：
transform: translateX(-100%)—— 完全移出视口左侧（注意不是left: -100%，后者会触发布局重排） - 展开状态：
transform: translateX(0) - 必须加
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)，y1 > 1 才有自然弹性回弹感 - 动画前临时加
will-change: transform，提示浏览器提前优化（别常驻，JS 控制增删）
主内容区要协同动起来
如果希望主内容真实“让位”（比如侧边栏展开时，主体宽度收缩、滚动条重绘），不能只动侧边栏——得让主内容也参与位移。
- 给主内容区（如
.main-content）加transition: transform 0.3s ease - 侧边栏打开时，同时给主内容加
transform: translateX(280px)（数值需匹配侧边栏宽度） - 或改用
margin-left动画（仅当需要 Flex 布局真实重排时），但务必保证margin-left收起值与侧边栏width严格一致，否则留白
交互与可访问性不能省
点击按钮没反应？多数问题出在绑定时机或属性不匹配；体验卡顿？往往因为过渡了不该过渡的属性。
立即学习“前端免费学习笔记（深入）”；
- 按钮加
aria-expanded="false"，菜单容器加id="nav-drawer"和aria-labelledby指向按钮 - 侧边栏打开时，给
<body>加overflow: hidden防止背后滚动；iOS Safari 可补position: fixed; width: 100vw - 关闭逻辑要双保险：监听 document 点击（排除菜单和按钮区域），再加 focusout 监听（键盘用户焦点离开时自动关闭）
- 移动端加
touch-action: pan-y到侧边栏，允许上下滚动但禁用水平拖拽干扰手势
响应式断点要关掉动画
大屏下侧边栏常驻，但很多人忘了在媒体查询里停掉过渡——结果缩放窗口时侧边栏自己“抽风滑动”。
- 在
@media (min-width: 768px)内显式写transition: none或transition-duration: 0s - 优先用
min-width断点，max-width在移动端可能因地址栏缩放误判 - 遮罩层（
.overlay）必须与侧边栏同级，z-index高于主内容、低于侧边栏，且点击可关闭
