根本原因是 transform 和 display 不改变布局占用，而 margin-left 动画通过修改盒模型属性触发布局重排，使 flex 容器重新分配空间，配合 flex: 1 实现主内容自动平滑扩展。
主内容区无法平滑拉伸，根本原因几乎总是用了 transform: translateX() 或 display: none —— 这两类操作不改变元素在 Flex/Grid 布局中的实际占用空间，所以相邻区域根本“感知不到”变化。
为什么 margin-left 动画能让主内容自动扩展
Flex 容器分配空间时，只认盒模型属性（width、margin、flex 等）的真实值。给侧边栏加 margin-left: -240px，等效于把它从布局流中向左“挤出”，其有效宽度立刻变为 0，.main-content 的 flex: 1 就会立即响应并撑满剩余空间。
-
margin-left可动画、触发布局重排（reflow），且浏览器优化成熟 - 必须配合
transition: margin-left 0.3s ease，不能只写transition: all - 初始
margin-left值需与侧边栏自然宽度一致（比如用getBoundingClientRect().width动态读取） - 收起后记得加
overflow: hidden防止内容溢出残留
width + max-width 组合过渡的陷阱
直接对 width 做 transition 看似直观，但容易因字体渲染、内边距、换行导致测量偏差，动画中途卡顿或跳变。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 不要设
width: 0→width: auto：auto 不可动画，浏览器会跳到最终值 - 正确做法是先用 JS 测出展开态宽度（如
menuContent.getBoundingClientRect().width），存为变量，再设width: 0→width: [测得值]px - 若侧边栏含动态内容（如异步加载菜单项），必须在内容渲染完成后再测宽，否则值偏小
- 搭配
max-width过渡能缓解跳变，但不如margin-left方案稳定
Flex 布局下必须检查的三个 class 状态
哪怕 CSS 写对了，JS 切换 class 失败也会让动画失效。常见断点就在状态控制环节。
- 确保侧边栏容器有明确的
flex-shrink: 0，否则 Flex 会压缩它干扰动画 - 收起时添加的 class 必须同时覆盖
margin-left和width，不能只改一个 - 主内容区必须声明
flex: 1或flex-grow: 1，仅靠width: 100%不生效 - 检查是否误加了
position: absolute到侧边栏——这会让它脱离 Flex 上下文，margin-left失效
真正难的不是写出动画，而是让每一次折叠都准确反映内容真实尺寸、不触发重排抖动、且主内容区的扩展节奏和侧边栏完全同步——这需要 JS 测量时机精准，CSS 属性选择克制，以及对 Flex 计算逻辑的诚实信任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
