transform:translateX 比 left/top 更适合侧边栏滑入，因其触发 GPU 合成层，不触发重排与重绘，动画更流畅；而 left/top 会频繁触发 Layout 和 Paint，易卡顿。
transform:translateX 为什么比 left/top 更适合侧边栏滑入
因为 transform 触发的是合成层（compositor layer），不触发重排（layout）和重绘（paint），只走 GPU 合成，动画帧率更稳；而用 left 或 top 改变位置会强制浏览器反复计算布局，尤其在中低端设备上容易卡顿甚至掉帧。
常见错误现象：left: -300px → left: 0 动画在滚动或 JS 执行密集时明显卡顿，DevTools 的 Performance 面板能看到大量 Layout 和 Paint 事件。
- 必须给侧边栏容器加
will-change: transform（仅在动画前临时开启，动画结束及时清除，避免内存占用） - 避免同时对
transform和opacity做过渡——opacity本身是合成属性，但合并在同一transition里可能干扰优化路径 - 移动端要注意：iOS Safari 对
transform: translateX()的 subpixel 渲染有轻微抖动，建议用transform: translate3d(0, 0, 0)强制启用 3D 上下文（实际仍是 2D 位移）
transition 属性写法必须锁定 transform，不能写 all
写 transition: all 0.3s ease 看似省事，但一旦侧边栏后续加了 background-color 或 box-shadow 等变化，就会意外触发重绘，拖慢整个动画；而且不同属性的默认缓动函数不同，all 会让浏览器按最保守策略处理。
使用场景：侧边栏只做水平位移，其他样式（如背景、文字）保持静止。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 推荐缓动：用
cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease更自然，起始不突兀、结束有惯性 - 不要给
transition加!important——它无法覆盖内联 style 中的 transition，反而让调试变难
JavaScript 控制 translateX 时，class 切换比内联 style 更可靠
直接用 element.style.transform = 'translateX(0)' 看似快，但容易和 CSS 动画冲突：比如用户快速点击两次，第二次执行时上一次动画还没结束，style.transform 会覆盖掉正在运行的 transition，导致“跳变”或卡死。
性能影响：频繁 setAttribute 或 style 操作会强制同步样式计算，而 class 切换由浏览器批量处理，更轻量。
- 推荐结构：默认状态加
sidebar--closed（对应transform: translateX(-100%)），点击后切换为sidebar--open（对应transform: translateX(0)） - 动画结束监听用
element.addEventListener('transitionend', handler)，但注意过滤非transform的事件（检查e.propertyName === 'transform'） - 移动端需防重复点击：在
transitioning状态下禁用 toggle 按钮，或用pointer-events: none临时屏蔽
兼容性兜底：IE11 和老 Android WebView 需要额外处理
IE11 支持 transform: translateX()，但不支持 transform: translate3d() 的 z 轴参数（哪怕为 0）；部分 Android 4.x WebView 对 transform 过渡的解析不稳定，表现为动画卡在中间态或直接跳转。
容易踩的坑：用 Autoprefixer 自动加前缀时，默认不处理 IE11 的 -ms-transform，且老 WebView 可能忽略 will-change。
- 必须显式写：
-webkit-transform和-ms-transform，Autoprefixer 不再自动补全-ms- - 兜底方案不是降级为
left，而是加一层@supports (transform: translateX(0))条件规则，把老环境逻辑单独抽离 - 测试重点：真机跑 Android 4.4 + Crosswalk、IE11（非 Edge）、iOS 9.3 Safari
真正麻烦的不是写法，是动画状态和 DOM 可见性、焦点管理、屏幕阅读器 announce 的协同——比如滑入后没自动 focus() 到第一个可交互元素，键盘用户就卡住了。这点常被忽略，但一上线就被无障碍测试打回来。
