CSS transition 无法直接作用于 height: auto，因其为非确定值，浏览器渲染时才计算具体像素，transition 缺少起始/结束数值无法插值；应改用 max-height 或 JS 动态读取 scrollHeight 配合重排实现。
transition 无法直接作用于 height: auto 的原因
CSS 的 transition 只能对可计算的数值型属性做插值动画，而 height: auto 是一个非确定值——浏览器在渲染时才根据内容撑开高度，没有具体像素数，transition 拿不到起始和结束的数字，自然无法平滑过渡。
常见错误现象是：折叠时瞬间收起、展开时“啪”一下弹出来，或者干脆没动画。
- 不要写
transition: height 0.3s ease+height: auto，这等于没写 - 展开/收起前必须知道目标高度（像素值），哪怕只是临时算出来
- 如果内容动态加载（比如异步填充），得等 DOM 渲染完成再读取
scrollHeight
用 scrollHeight + max-height 替代 height 的实操方案
这是目前最稳定、无需 JS 计算最终 height 值的折中办法：让 max-height 承担过渡职责，利用其可动画性模拟 height 动画。
使用场景：手风琴项内容长度不固定但有合理上限（比如单个面板不超过 500px）。
立即学习“前端免费学习笔记（深入）”；
- 给内容区设
max-height: 0（收起）和max-height: 500px（展开），中间加transition: max-height 0.3s ease - 必须同时配
overflow: hidden，否则内容会溢出 -
500px要略大于可能的最大内容高度；设太小会截断，太大则收起时留白明显 - 收起状态还要加
opacity: 0和visibility: hidden（配合transition-delay实现更干净的隐藏）
.panel-content {
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0.2s;
}
.panel-content.is-open {
max-height: 500px;
opacity: 1;
visibility: visible;
}
JavaScript 动态读取 scrollHeight 并设置 height 的时机要点
如果内容高度差异大（比如从 20px 到 800px），用固定 max-height 会显得僵硬。这时就得 JS 出手，但关键在「什么时候读、怎么设、怎么清」。
容易踩的坑：在元素 display: none 或 visibility: hidden 时读 scrollHeight，结果恒为 0。
- 元素必须处于「流式渲染状态」才能读准：先设
position: absolute或临时visibility: hidden+height: auto，再读scrollHeight - 设置完
height后，立刻用offsetHeight强制重排，再切回目标状态（如height: 0→height: Xpx） - 动画结束后记得清除内联
height，避免影响后续 JS 控制或响应式行为
示例关键逻辑：
const el = document.querySelector('.panel-content');
el.style.height = 'auto';
const targetHeight = el.scrollHeight;
el.style.height = '0';
// 触发重排
void el.offsetHeight;
el.style.height = targetHeight + 'px';
Flex/Grid 容器下手风琴高度过渡失效的兼容处理
当手风琴内容区父容器是 display: flex 或 display: grid 时，子元素设 height 或 max-height 往往被忽略——flex item 默认按内容收缩，且不响应 max-height 过渡。
性能影响不大，但视觉上完全没动画，用户感知就是“卡顿”。
- 给内容区加
align-self: flex-start（flex）或align-self: start（grid），防止被拉伸 - 更稳妥的做法：把内容区再包一层
<div class="content-wrapper">，动画只作用于 wrapper，父容器保持 flex/grid 布局不变<li>不要用 <code>transform: scaleY()模拟，它会模糊文字、影响 focus 状态，且无法与 overflow 配合
真实项目里，最常被忽略的是 scrollHeight 读取时机和 flex 容器的隐式拉伸行为——这两处一错，动画就彻底消失，而不是“不太顺”。
