用 margin-left 替代 transform 实现侧边栏真实退出，可触发 Flex 容器重分配空间，使主内容区自动扩展；transform 仅改变渲染位置，不脱离文档流，故主内容区宽度不变。
右侧内容区域不会自动“滑过来”填空，是因为侧边栏收起时仍占文档流位置——必须让它的退出触发 Flex 容器重新分配空间，否则只能靠 transform 假装消失，主内容根本不动。
为什么用 transform 收起侧边栏，主内容不扩展？
transform: translateX(-100%) 只改变渲染位置，不脱离文档流。Flex 容器始终认为侧边栏还在，flex: 1 的主内容区宽度不变，视觉上就是“卡住不动”。常见现象是：菜单消失了，右边留一大片空白，或者内容被遮挡但没重排。
- DOM 结构里它依然存在，浏览器布局引擎照常计算其 width 占位
-
visibility: hidden或opacity: 0同样无效——它们不释放空间 - 唯一能触发 Flex 重分配的，是改变元素在主轴上的“参与度”，比如
margin-left、flex-basis或width的真实变化
用 margin-left 替代 transform 实现真实退出
核心是让侧边栏在动画过程中“主动让出主轴空间”，迫使 Flex 容器把剩余宽度实时分给主内容区。关键不是隐藏它，而是让它在布局计算中“变薄”。
- 初始状态：
margin-left: 0，侧边栏正常显示，主内容区宽度为flex: 1 - 收起状态：
margin-left: -300px（值需等于侧边栏实际宽度），同时设flex: 0 0 auto防止 Flex 压缩干扰 - 过渡属性必须包含
margin-left，且不能只写all—— 否则会意外过渡其他属性导致抖动 - 示例 CSS：
transition: margin-left 0.4s ease, width 0.4s ease;
Flex 布局下主内容区必须设 flex: 1 且无固定宽
如果主内容区写了 width: calc(100% - 300px) 或 flex: 0 0 70%，它就不会响应侧边栏的 margin 变化。Flex 的自适应依赖于“剩余空间”的动态计算。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.main { width: calc(100vw - 300px); }—— 固定计算，不随 margin 变化 - 正确写法：
.main { flex: 1; min-width: 0; }——min-width: 0防止内容溢出撑宽容器 - 侧边栏本身建议显式设
flex: 0 0 300px，避免 Flex 缩放导致宽度失真
JS 控制 class 切换时注意 DOM 时机
用 classList.toggle('collapsed') 触发样式切换后，若紧接着调用 getBoundingClientRect() 或操作子元素，可能读到旧布局。尤其在快速连续点击时容易出错。
- 收起前无需测量宽度，但展开前如果侧边栏曾被 JS 动态改过
width，要确保 class 切换后浏览器完成样式计算再读尺寸 - 安全做法：用
requestAnimationFrame延迟到下一帧，例如：requestAnimationFrame(() => { /* 读宽或聚焦 */ }); - 避免在
transitionend里立即 toggle 同一 class，可能因事件冒泡或重复触发导致状态错乱
真正平滑的过渡，不在动画曲线多漂亮，而在布局是否“诚实退出”。只要侧边栏的收缩真实影响了 Flex 主轴空间分配，主内容区的扩展就是必然结果——其余只是补帧率、调缓动、防闪烁的事。
