侧边栏划入动画应使用 transform: translatex() 而非 left 或 margin，以避免重排、启用 gpu 加速；初始设为 translatex(-100%)，配合 transition 和 will-change: transform，贝塞尔曲线 cubic-bezier(0.34, 1.56, 0.64, 1) 因 y1>1 实现超调弹性效果。
侧边栏划入动画用 transform 而不是 left 或 margin
直接改 left 或 margin-left 会触发重排，动画卡顿明显，尤其在中低端安卓机上。用 transform: translateX() 只影响合成层，GPU 加速更稳。
- 初始状态设为
transform: translateX(-100%)（完全藏左），不是display: none—— 后者无法过渡 - 显示时切到
transform: translateX(0)，配合transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) - 别忘了加
will-change: transform（仅在动画触发前临时加，避免常驻开销）
cubic-bezier(0.34, 1.56, 0.64, 1) 为什么比 ease-in-out 更“弹性”
标准 ease-in-out 是 cubic-bezier(0.42, 0, 0.58, 1)，起止都平缓，但缺乏回弹感。而 cubic-bezier(0.34, 1.56, 0.64, 1) 的第二个参数（y1）> 1，让曲线在中间段“冲过头”，再拉回，模拟物理弹性。
- y1 > 1 表示动画先超调（overshoot），这是弹性感的来源；y2 = 1 确保终点精准停住
- 别用 y1 > 2 或 y2
- 真要调参，用 Chrome DevTools 的动画面板拖点实时看，别靠猜
响应式断点里别只改宽度，还要同步控制动画开关
小屏划入、大屏常驻，这没问题；但很多人忘了：在媒体查询里只改 width 和 transform，却没关掉过渡效果，结果窗口缩放时侧边栏自己“抽风滑动”。
- 大屏（如
min-width: 768px）下，显式写transition: none或transition-duration: 0s - 用
max-width做断点时，注意移动端浏览器地址栏缩放可能触发误判，优先用min-width - 如果侧边栏内容多，大屏下建议加
overflow-y: auto，不然内容被裁切还不滚动
划入后页面主体内容“抖一下”？检查 overflow-x: hidden 是否漏了
侧边栏划入时，body 宽度撑开导致横向滚动条闪现，主体内容被强制重排——这是最常被忽略的视觉 bug。
立即学习“前端免费学习笔记（深入）”；
- 在划入动画生效期间（比如加个
.sidebar-open类到），必须配overflow-x: hidden - 别只写在
html或body上，某些框架（如 Next.js）会套多层 wrapper，得查真实滚动容器 - iOS Safari 对
overflow-x: hidden支持不一致，可补一句position: fixed; width: 100vw防抖
