不能用 display: none 切换折叠面板，因为 display 是离散属性无法插值过渡，必须改用 max-height、opacity 或 flex-basis 等可动画属性配合 overflow: hidden 实现平滑过渡。
为什么不能用 display: none 切换折叠面板
display 属性是离散状态，浏览器无法对 display: none 和 display: block 之间做插值过渡，transition 直接跳变。哪怕加了 transition: all 0.3s，内容也会瞬间闪现或消失，毫无动画效果。
常见错误写法：.panel-content { display: none; } → .panel-content.is-open { display: block; }，无论怎么调 transition 都无效。
- 必须用可插值的属性：如
max-height、opacity、flex-basis（横向折叠时） - 配合
overflow: hidden才能隐藏溢出内容，否则高度过渡时内容会“撑开”容器 - 若用
visibility，它本身不可动画，但可配合opacity做渐隐，需单独声明transition: visibility 0.2s, opacity 0.2s
Flex 布局中横向折叠容器怎么过渡 flex-basis
横向并排的折叠组（比如仪表盘卡片栏），不能依赖 flex-basis: auto —— auto 不可插值，设成 flex-basis: 0% 或具体百分比（如 40%）才能触发 transition。
典型结构是 .row { display: flex; } 下多个 .container，每个通过 class 控制展开/收缩状态：
- 收缩态：
.container.collapsed { flex-basis: 0%; opacity: 0; width: 0; overflow: hidden; } - 展开态：
.container.expanded { flex-basis: 40%; opacity: 1; width: auto; } - 必须给
.container显式声明transition: flex-basis 0.3s ease, opacity 0.3s ease, width 0.3s ease - 父容器
.row加overflow-x: hidden，防止收缩过程中内容溢出导致滚动条抖动
vertical 折叠面板用 max-height 过渡的实操要点
max-height 是 vertical 折叠最常用且兼容性最好的方案，但它不是设成 auto 就行 —— 浏览器根本不会对 auto 插值，max-height: 0 → auto 动画直接失效。
- 安全写法：初始
max-height: 0，展开后设为足够大但不过量的固定值，例如max-height: 30em或max-height: 500px - 过大会导致收起后留白（动画结束但高度仍远大于 0）；过小会截断内容（动画卡在中间）
- 必须始终搭配
overflow: hidden，漏掉它，内容会在过渡中溢出、遮挡其他元素 - 如果内容高度波动极大（比如从 20px 到 800px），纯 CSS 就不够用了，得用 JS 读取
scrollHeight并动态设置max-height内联样式
Flex 容器内侧边栏收起时主内容如何自动占满空间
别用 transform: translateX(-100%) —— 它只移动渲染位置，不脱离文档流，.main-content 根本感知不到空间变化，不会扩展。
- 正确做法是改用
margin-left或直接控制flex属性：收缩时设.sidebar { margin-left: -200px; }，同时.main-content { flex: 1; } - 动画必须作用于参与 Flex 计算的属性，如
margin-left、width、flex-basis，而非仅视觉属性 - 过渡声明要明确：
transition: margin-left 0.3s ease, width 0.3s ease，避免用all触发意外重排 - Safari 旧版可能忽略
margin-left过渡，可加will-change: margin-left提升兼容性
真正难的不是写几行 CSS，而是判断哪些属性能参与布局重排、哪些只是“画上去的假象”。一旦选错属性，动画就只剩视觉欺骗，布局逻辑完全脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
