transition 无法直接作用于 height: auto，因浏览器无法计算 auto 的像素值；应使用 max-height 模拟过渡或 javascript 动态获取 scrollheight 设置精确高度。
transition 不能直接对 height: auto 起作用
直接写 transition: height 0.3s 并把 height 从固定值设为 auto，动画不会发生——浏览器无法计算 auto 的具体像素值，也就没有中间状态可插值。这是最常踩的坑，也是所有“高度过渡失效”问题的根源。
用 max-height 替代 height 实现“伪自动”过渡
只要目标高度可预估上限（比如内容最多撑开到 500px），就用 max-height 配合足够大的初始值来模拟 auto：
-
max-height必须设为一个明确的、大于实际内容高度的数值（如500px或100vh），不能用auto - 初始状态设
max-height: 0+overflow: hidden，隐藏内容 - 展开时设
max-height: 500px（或更大），并确保内容真实高度 ≤ 该值，否则底部会被截断 - 过渡写在基础样式里：
transition: max-height 0.3s ease-in-out
示例：
details summary + div {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
details[open] summary + div {
max-height: 500px;
}
需要真正动态高度？JavaScript + scrollHeight 是唯一可靠方案
当内容高度完全不可预测（比如用户输入、异步加载、字体加载影响排版），必须用 JS 获取真实高度再设为 height：
- 先设
height: 0+overflow: hidden - 展开前，强制重排（如读取
offsetHeight），再读取scrollHeight - 用
element.style.height = element.scrollHeight + 'px'设置目标高度 - 过渡生效后，监听
transitionend，还原为height: auto（否则后续内容变化会导致高度卡死）
关键点：height: auto 只能在过渡结束后设，不能作为起始或结束值参与过渡。
别忽略 overflow 和 box-sizing 的副作用
即使高度过渡逻辑正确，也可能因布局细节失败：
-
overflow: hidden必须始终存在，否则内容会溢出破坏动画视觉 - 如果元素有
padding或border，记得确认box-sizing是border-box，否则scrollHeight和手动设置的height容易偏差 - 使用
max-height方案时，若内容含margin，它不参与scrollHeight计算，但会影响实际占用空间，需额外预留余量
真正难的不是写 transition，而是判断该用 max-height 还是必须上 JS——前者快但有上限假设，后者准但要处理重排和 cleanup。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
