height: auto 无法触发 transition，因其为关键字而非数值；应改用 max-height 配合 overflow: hidden 实现过渡动画，预设足够但不过大的数值（如 500px），或用 JS 动态测量 scrollHeight 精确设置。
为什么 height: auto 无法触发 transition
CSS 的 transition 只对可计算的数值型属性生效，而 height: auto 是一个关键字，浏览器 无法确定它对应的像素值，因此无法插值动画。直接写 transition: height 0.3s 在从固定高度变到 auto 时会“啪”一下跳变。
用 max-height 替代 height 的实操要点
核心思路是：用足够大的 max-height 值（但不能过大影响性能）模拟 auto 行为，并对 max-height 做过渡。
-
max-height必须设为具体数值（如500px），且该值需大于内容实际可能达到的最大高度 - 初始状态设为
max-height: 0，同时配合overflow: hidden隐藏溢出 - 展开时设为一个「安全上限」，比如
max-height: 500px；这个值不是越大约好，超过 1000px 可能导致动画卡顿或布局抖动 - 收起时必须确保
max-height真正归零，否则残留值会让元素仍占空间
max-height 过渡的典型写法与常见错误
以下是最简可用的 toggle 动画结构：
div.collapsible {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out;} div.collapsible.open {max-height: 500px; / 注意：不能写成 max-height: fit-content 或 auto / }
容易踩的坑：
立即学习 “ 前端免费学习笔记（深入）”；
- 误写
max-height: none——none不是可过渡的数值，动画立即失效 - 内容动态变化后高度超出预设
500px，导致底部被截断 —— 此时需重新评估内容最大高度，或改用 JS 测量后注入精确值 - 过渡时间过短（如
0.1s）或过长（如0.8s），人眼感知为“卡”或“拖沓”，推荐0.25s–0.35s区间 - 没加
overflow: hidden—— 展开过程中内容会先撑开容器再收缩回来，造成闪烁
需要精确控制时，用 JS 动态设置 max-height
当内容高度差异大、无法预估上限（比如富文本、用户评论）时，纯 CSS 方案容易失守。此时可在 JS 中测量真实高度并写入内联样式：
const el = document.querySelector('.collapsible'); const height = el.scrollHeight + 'px'; el.style.maxHeight = height;注意时机：
- 必须在元素已渲染且可见（
display: block）后测量，否则scrollHeight为 0 - 展开前设
max-height: 0，下一帧再设目标值，否则过渡不触发（可用requestAnimationFrame或setTimeout(……, 0)） - 收起动画结束前，不要直接移除
open类或重置max-height，否则动画中断
真正麻烦的不是怎么动，而是怎么知道该动多高 —— 大多数平滑失败，其实卡在了对内容高度的误判上。
