双侧边栏需按职责拆解控制逻辑：左侧栏用 margin-left 动画退出布局流，右侧栏用 transform + opacity 脱离文档流，过渡时间错开50ms以上，主内容区必须设 flex: 1 和 min-width: 0，右侧栏需加 will-change: transform 和 overscroll-behavior: contain，统一用 CSS 变量控制状态，并注意 z-index 层级。
双侧边栏不能共用同一套 width + transition
直接给两个侧边栏都套 width: 240px → width: 0 + transition: width 0.3s，会导致：右侧栏展开时左侧栏还在收，主内容区被反复挤压、文字重排；更糟的是，width: 0 时 padding/border 仍占空间，视觉上“缩不干净”。
真正要区分的是布局角色：左侧栏（导航）通常固定位置、需释放空间；右侧栏（工具/筛选面板）常浮动、可脱离文档流。必须按职责拆解控制逻辑。
- 左侧栏用
margin-left动画：收缩时设margin-left: -240px，主内容区靠flex: 1自动撑满，真实退出布局流 - 右侧栏用
transform: translateX()：设position: fixed或absolute，动画走transform+opacity，不干扰主布局 - 两者过渡时间必须错开 50ms 以上，避免浏览器渲染帧冲突（比如左栏
0.3s，右栏0.35s）
左侧栏收缩后主内容区不自动扩展？检查 flex 容器的 flex-shrink
常见现象：点击折叠按钮，左侧栏“滑走了”，但中间内容区宽度没变，留出大片空白。根本原因不是 JS 没触发 class，而是 CSS 中父容器的 flex-shrink: 0 或子项未设 flex: 1。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.layout {
display: flex;
}
.sidebar-left {
flex: 0 0 240px; /* 不缩放、基础宽 240px */
transition: margin-left 0.3s ease;
}
.sidebar-left.collapsed {
margin-left: -240px;
}
.main-content {
flex: 1; /* 关键：必须有这个 */
min-width: 0; /* 防止内容溢出破坏 flex 计算 */
}- 不要依赖
width控制左侧栏，它和flex属性会冲突 -
min-width: 0是隐藏陷阱：没有它，长文本或未换行元素会让flex: 1失效 - 移动端若需响应式，改用
flex-basis替代width，避免媒体查询里重复覆盖
右侧栏抽屉动画卡顿？别用 left/top 做 transition
left: 0 → left: -300px 这类位移属性会频繁触发 layout（重排），尤其在低端设备或复杂 DOM 下掉帧明显。浏览器无法将其交由 GPU 加速。
必须改用 transform：
.sidebar-right {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100vh;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s;
}
.sidebar-right.open {
transform: translateX(0);
opacity: 1;
}- 务必加
will-change: transform（仅对右侧栏），但别写在通用 class 上，防止内存泄漏 - 动画曲线用
cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease更自然，收起时有轻微回弹感 - 如果右侧栏内含滚动区域（如筛选条件列表），需在容器上加
overscroll-behavior: contain，防止滑动穿透到背景页
双栏同时操作时状态不同步？用 CSS 变量统一控制开关
JS 里分别 toggle 两个 class 容易漏掉一个，或者异步执行顺序错乱（比如先收左栏再开右栏，中间帧出现双栏全显）。更稳的方式是用单一状态源驱动样式。
推荐方案：
:root {
--sidebar-left-state: 1; /* 1=展开，0=收起 */
--sidebar-right-state: 0;
}
.sidebar-left {
margin-left: calc(var(--sidebar-left-state) * -240px);
}
.sidebar-right {
transform: translateX(calc(100% * (1 - var(--sidebar-right-state))));
}- JS 只需更新
document.documentElement.style.setProperty('--sidebar-left-state', '0') - 避免 class 切换带来的竞态问题，CSS 变量更新是原子性的
- 注意：IE 不支持 CSS 变量，如需兼容，退回到 class 控制，但必须用 Promise.all 确保两个 DOM 更新同步完成
实际中最容易被忽略的点是：双侧边栏的 z-index 层级关系。左侧栏通常 z-index: 100，右侧栏得设成 z-index: 101，否则右侧栏展开时会被左侧栏遮挡——尤其当左侧栏用了 position: sticky。这个细节不报错、不警告，只在真机测试时才暴露。
