transition不能直接作用于height: auto，因浏览器无法对auto插值；应改用max-height过渡，设足够大但不过量的值（如500px或45em），配合JS切换类名实现手风琴动画。
transition 不能直接作用于 height: auto
这是最常卡住的地方：你想用 transition 动画展开一个内容高度不确定的区块，但写上 height: auto 后动画完全失效——因为浏览器无法对 auto 值做插值计算。它需要明确的起始和结束数值，比如 height: 0 → height: 240px。
用 max-height 替代 height 是最实用的折中方案
max-height 支持过渡，且只要设得足够大，就能“假装”是 auto。关键在于这个值要大于内容实际可能达到的最大高度，又不能过大（否则动画时间拉得太长）。
- 典型做法是设为
max-height: 500px或600px（适用于多数文本块） - 如果内容含图片或动态加载，建议留出余量，比如预估最大 30 行文字，按行高
1.5em算，max-height: 45em更稳妥 - 起始状态用
max-height: 0+overflow: hidden，否则内容会溢出 - 别忘了加
transition: max-height 0.3s ease-in-out，且必须写在「默认态」（未展开时）的规则里
需要 JavaScript 触发 class 切换，纯 CSS 无法响应点击
CSS 本身没有“点击后切换状态”的能力，:hover 只能临时悬停，:focus-within 依赖焦点，都不适合手风琴交互。你必须用 JS 控制类名：
// 点击标题时切换相邻内容块的 open 类
header.addEventListener('click', () => {
content.classList.toggle('open');
});
对应 CSS：
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.accordion-content.open {
max-height: 500px; /* 注意：这里不是 auto */
}
真正需要精确 height 动画时，得靠 JS 测量 + 强制重排
如果设计要求严格按真实高度过渡（比如避免“拉伸过头”感），就必须放弃纯 CSS 方案：
- 先用
element.scrollHeight读取内容真实高度 - 给元素设
height: 0，然后强制触发一次重排（例如读取offsetHeight） - 再设
height: ${scrollHeight}px，浏览器就会从 0 过渡到该值 - 收起时反过来：先设目标高度，再监听
transitionend后设回height: 0
这种写法绕过了 max-height 的估算误差，但代价是 JS 介入、代码变重、需处理异步渲染（如图片加载完成前测不准高度）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
