flex-basis动画仅对flex容器的直接子元素有效，且需父容器为单行布局；max-height是更兼容的方案，但阈值需合理设定并配合overflow:hidden，JS控制时须确保重排时机正确。
flex-basis 动画只在特定结构下有效
直接给 flex-basis 加 transition 失效，不是写法错，是结构不满足前提：它仅对 display: flex 容器的**直接子元素**生效，且父容器必须是单行布局（flex-wrap: nowrap）。侧边栏、横向选项卡这类“父 flex → 子项平铺”结构可用；但普通 <div class="panel"><ul><li>...</li></ul></div> 中的 <ul> 不是 flex 直接子项，硬套 flex-basis 就没反应。
常见误操作：.panel > ul { flex-basis: 0; transition: flex-basis 0.3s; } —— 父 .panel 没设 display: flex，这条规则等于没写。
- 确认父容器有
display: flex且flex-direction: row（控制宽度）或column（控制高度） - 避免同时声明
width或height，它们会覆盖flex-basis - 起始和结束值都得是可插值单位（如
0px→320px），禁用auto - IE11 完全不支持
flex-basis过渡，需降级为width+overflow: hidden
max-height 是通用安全解法，但阈值不能乱设
max-height 是目前最可靠、兼容性最好的折叠动画方案，但它不是设得越大越好。设成 max-height: 9999px 会导致动画末尾拖沓、低端设备卡顿，尤其在内容少时更明显。
合理阈值取决于内容密度：5 行文字 + padding ≈ 240px，含图标或小图的列表项 ≈ 40–48px/项，10 项就建议 max-height: 480px，再加 10% 余量防截断。
立即学习“前端免费学习笔记（深入）”；
- 禁止用
max-height: 100%或vh单位——父容器无显式高度时无效，且不参与插值 - 必须始终搭配
overflow: hidden，否则内容溢出，动画不可见 - 初始状态写
max-height: 0，展开状态写具体像素值（如max-height: 480px），不能写none - 若内容动态加载（如图片、异步文本），纯 CSS 无法预知高度，得用 JS 读
scrollHeight后赋值
JS 控制动画时，重排时机决定是否闪屏
点击后菜单“闪一下再展开”，大概率是 JS 在 DOM 插入/类切换后，没等浏览器完成重排就设置了 max-height。浏览器跳过过渡帧，直接渲染终态。
正确顺序是：先加展开类 → 强制同步读取（如 el.offsetHeight）→ 再设置目标 max-height 值。收起同理：先移除类 → 等 transitionend → 再设 max-height: 0 并清理内联样式。
- 判断状态别依赖
getComputedStyle(el).maxHeight，缓存可能不准；用el.classList.contains('open')更稳 - 不要在
click回调里直接el.style.maxHeight = el.scrollHeight + 'px'，容易因重排未就绪而失效 - 若面板内有
flex: 1子项，它会撑高容器，导致max-height被突破；应改用flex: 0 0 auto或加min-height: 0 - 移动端注意
box-sizing: border-box，否则padding和border会让实际高度超出预估值
混合 flex 与 max-height 时，包装层要分清职责
当折叠面板内部用了 display: flex; flex-direction: column，又想做高度过渡，别把 max-height 直接加在 flex 容器上。flex 计算和 max-height 过渡会互相干扰，尤其遇到 flex: 1 或 align-items: stretch 时，高度常不准。
推荐做法：用一层包裹 div（如 <div class="panel-wrapper">）承载 max-height 和 overflow: hidden，里面再放真正的 flex 面板（<div class="panel-content">）。这样动画逻辑归 wrapper，布局逻辑全留给内部 flex。
-
.panel-wrapper负责max-height、overflow: hidden、transition -
.panel-content负责display: flex、flex-direction、子项布局 - 避免给
.panel-content设flex-basis动画值，它不该参与高度变化 - 若需横向排列子项（如按钮组），在
.panel-content内部用display: flex; flex-wrap: wrap，而非靠flex-basis控制整体高度
scrollHeight 计算失准、异步加载导致高度突变、父级 transform 触发新层叠上下文使 overflow: hidden 失效——这些都得按具体 case 处理，没法靠一个通用值兜底。 
