侧边栏用 transform: translateX() 隐藏时内容区“闪一下”，是因为侧边栏未脱离文档流导致布局重排；应设 position: fixed + 仅过渡 transform，并同步控制主内容区 margin-left。
transform: translateX() 隐藏侧边栏时，为什么内容区域会“闪一下”？
因为 transform 不影响文档流，但若侧边栏原本是 position: static 或参与正常布局（比如用 float 或未设 width），隐藏后父容器宽度未重算，导致右侧内容区域在动画开始瞬间因布局重排而跳动。
解决关键是让侧边栏脱离文档流且不触发重排：
- 给侧边栏加
position: fixed或position: absolute（推荐fixed，避免滚动时错位） - 确保其
left值与transform: translateX()协同：例如侧边栏宽280px，初始状态设left: 0; transform: translateX(0)，隐藏时改为left: 0; transform: translateX(-280px) - 不要依赖
display: none切换——它会中断动画、清空渲染帧，必须全程用transform+transition
transition 写在谁身上？写哪些属性才真正平滑？
必须写在侧边栏元素本身上，且只过渡 transform —— 这是唯一能被 GPU 加速、不触发布局和绘制的 CSS 属性。
错误写法：transition: all 0.3s 或 transition: left 0.3s，前者可能意外过渡 opacity 等引发重绘，后者 left 是 layout 属性，强制同步渲染，卡顿明显。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100vh;
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sidebar.is-hidden {
transform: translateX(-280px);
}注意：cubic-bezier(0.22, 0.61, 0.36, 1) 比默认 ease 更适合侧滑，起始稍缓、中段快、结尾有回弹感。
如何让主内容区“自动避让”隐藏后的侧边栏空间？
不能靠 JS 动态改 margin-left，那样又会触发重排。正确做法是用 CSS 容器查询或视口单位 + transform 的副作用规避。
最稳妥方案：主内容区用 margin-left 预留空间，并通过 class 控制是否“收缩”：
- 默认状态：
.main { margin-left: 280px; } - 侧边栏隐藏时，同时给
加class="sidebar-hidden"，再写.sidebar-hidden .main { margin-left: 0; } - 关键：这个
margin-left变化要和transform动画同步触发（比如同一 JS 事件里 toggle 两个 class），否则视觉不同步
不推荐用 calc(100vw - 280px)，因为 vw 包含滚动条宽度，Windows 下会抖动；也不要用 width: fit-content，兼容性差且不可控。
移动端点击穿透、滚动粘滞怎么破？
侧边栏 position: fixed 后，若内容可滚动，iOS 上常出现滚动不了或点透到下层的问题。
必须加三样东西：
-
touch-action: pan-y：允许纵向滚动，禁用横向拖拽干扰 -
overscroll-behavior: contain：阻止滚动到底时触发页面回弹（尤其 Safari） -
will-change: transform（仅动画期间加）：提前提示浏览器该元素将变换，提升合成层创建优先级
注意：will-change 别常驻，应在 JS 中动画开始前加、结束回调里移除，否则长期占用内存。
侧边栏动画看似简单，真正难的是各浏览器对 transform 合成层的触发时机不一致，以及 fixed 元素在 iOS 滚动上下文中的行为差异——这些细节不处理，用户一滑就露馅。
