优先选 transform。因 fixed 易与软键盘、缩放冲突且触发重排，而 transform: translateX() 仅影响合成层、GPU 加速更稳；需设 fixed 脱离文档流，动画仅用 transform 控制，加 transition 和 will-change，并注意遮罩层平级结构、事件委托、可访问性及渲染性能优化。
抽屉侧边栏用 position: fixed 还是 transform？
优先选 transform。用 left: -100% 或 left: 0 切换会触发重排，动画卡顿；transform: translateX() 只影响合成层，GPU 加速更稳。尤其在移动端，fixed 容易和软键盘、页面缩放冲突，滚动时还可能“抖一下”。
实操建议：
- 侧边栏容器设
position: fixed（保证脱离文档流、不占位），但动画只靠transform: translateX()控制显隐 - 初始状态写
transform: translateX(-100%)，展开时改为transform: translateX(0) - 必须加
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)—— 这个贝塞尔曲线比默认的ease更顺滑，收尾不生硬 - 别忘了加
will-change: transform（仅在需要高性能时启用，避免滥用）
点击遮罩层关闭侧边栏时，如何避免误触内部链接？
常见错误是把遮罩层（.overlay）和侧边栏（.sidebar）都放在同一个父容器里，然后给遮罩层绑 click 关闭逻辑 —— 结果用户点侧边栏里的按钮，事件冒泡到遮罩层，按钮没点上，侧边栏先关了。
解决方法：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层和侧边栏平级，都作为
body的直接子元素，结构清晰互不嵌套 - 遮罩层的
click处理函数里，检查event.target === event.currentTarget，确保只响应遮罩层本体点击 - 侧边栏内部所有可交互元素（
a、button）加pointer-events: auto（如果父级被设了none） - 移动端还要防 touchmove 穿透：遮罩层加
touch-action: none
transform 动画卡顿或闪一下？检查这三点
不是代码写错，而是渲染管线被干扰了。最常踩的坑就这三个：
-
transform元素有box-shadow或filter: drop-shadow()：模糊/阴影强制回退到 CPU 渲染，动画掉帧。改用backdrop-filter或精简阴影参数（比如box-shadow: 0 2px 8px rgba(0,0,0,0.1)） - 侧边栏内容区域用了
overflow-y: auto，但没设固定高度：滚动容器尺寸不定，导致transform合成层频繁重建。务必加height: 100vh或max-height: 100vh - 父级有
transform、perspective或filter：会创建新的包含块，干扰子元素的合成层提升。检查 DOM 树里有没有无意义的包装div套了这些属性
如何让侧边栏支持键盘焦点与屏幕阅读器？
纯视觉动效容易忽略可访问性。用户按 Tab 键进不来、关不掉、读不出内容，等于功能残缺。
关键动作：
- 打开侧边栏后，用
focus()主动聚焦第一个可交互元素（如顶部关闭按钮），并用inert属性或aria-hidden="true"把主内容区域临时“屏蔽” - 监听
Escape键：全局keydown中判断event.key === 'Escape'并关闭 - 侧边栏根元素加
role="dialog"和aria-modal="true"，关闭按钮加aria-label="关闭菜单" - 不要依赖
display: none隐藏侧边栏 —— 它会让屏幕阅读器完全忽略。用visibility: hidden; position: absolute; left: -9999px或保持 DOM 存在 +transform移出视口
动画本身不影响可访问性，但“看不见”不等于“不存在”——DOM 结构、语义标签、焦点管理，一个都不能少。
