侧边栏推拽用 transform: translateX() 更流畅，避免 left/margin-left 触发重排；初始隐藏用 translateX(-100%)，配合 ease-out 或自定义 cubic-bezier 过渡更自然；移动端需谨慎 preventDefault() 并启用 -webkit-overflow-scrolling: touch。
侧边栏用 transform 推拽比 left 更稳
直接改 left 或 margin-left 触发重排，动画卡顿明显；transform: translateX() 只触发合成，GPU 加速，滑动顺得多。移动端尤其明显。
- 初始状态设
transform: translateX(-100%)（完全隐藏），不是display: none或visibility: hidden—— 后两者会断开动画连贯性 - 切换时只改
transform和transition，别同时动width或opacity，否则可能触发额外布局计算 - 加
will-change: transform仅在需要高性能拖拽（比如手指实时跟随）时用，日常开关切换没必要，反而可能增加内存开销
transition 的 timing-function 别硬套 ease
默认 ease 开头慢、结尾急，侧边栏“弹出来”显得突兀；用 ease-out 或自定义 cubic-bezier(0.34, 1.56, 0.64, 1) 更自然——模拟物理惯性，收尾带点缓冲。
- 固定宽度侧边栏：用
transition: transform 0.3s ease-out足够 - 响应式侧边栏（比如从 280px 缩到 60px）：避免对
width做 transition，改用transform: scale()+transform-origin模拟缩放，更轻量 - 如果配合 JS 拖拽手势，transition 要在拖拽中临时设为
none，松手后再恢复，否则拖拽过程会“粘滞”
移动端拖拽时 touchmove 阻止默认行为的坑
不加 event.preventDefault()，iOS 上拖拽侧边栏会触发页面整体滚动；但加得太早，又可能误杀文本框输入或下拉刷新。
- 只在识别出是侧边栏拖拽区域（比如
data-sidebar-draggable元素）且横向位移 > 5px 时才调preventDefault() - 别在
touchstart就阻止，默认行为要留到真正需要时再干预 - CSS 里补一句
-webkit-overflow-scrolling: touch到侧边栏容器，避免 Safari 滚动卡顿
用 @media 切换布局时，动画状态容易断掉
比如从移动端（侧边栏默认隐藏）切到桌面端（侧边栏常驻），如果只靠媒体查询改 transform，之前 JS 设置的内联样式会覆盖 CSS 规则，导致“闪一下”或卡在中间状态。
立即学习“前端免费学习笔记（深入）”；
- 关键：把侧边栏显隐状态交给 class 控制（如
.sidebar--open），媒体查询只控制默认展开/折叠逻辑，不直接写transform - 桌面端用
@media (min-width: 768px)移除.sidebar--collapsed类，但保留过渡属性，让状态变化仍有动画 - JS 切换前先检查
window.matchMedia，避免在桌面模式下调用移动端的推拽逻辑
最麻烦的其实是拖拽松手那一刻的边界判断——位移阈值、速度衰减、惯性滚动，这些纯 CSS 做不了，得靠 JS 补齐。动画只是表层，状态同步才是真难点。
