浏览器无法对height: auto插值计算，因其非具体数值，导致transition直接跳变；应改用max-height配合overflow:hidden实现过渡，或通过js获取scrollheight动态设置精确高度。
为什么不能直接用 height: auto 做过渡
浏览器根本没法对 height: auto 做插值计算——它不是数值，transition 就会直接跳变。你看到的“没动画”，其实是 CSS 放弃了过渡，不是你写错了。哪怕加了 transition: height 0.3s，也毫无作用。
max-height 配合 CSS 变量的可行边界在哪里
用 max-height 是目前最轻量、兼容性最好的方案，但它的上限值必须是「可预测的数值」。CSS 变量本身不能动态读取 scrollHeight，所以变量只能做两件事：存一个预设的合理上限，或配合 JS 注入真实高度。
- 纯 CSS 场景下，变量适合存多档响应式阈值，比如：
--panel-max-height-sm: 200px、--panel-max-height-lg: 600px - JS 注入时，变量可作为中转容器，例如：
panel.style.setProperty('--real-height', panel.scrollHeight + 'px')，再在 CSS 中写max-height: var(--real-height, 500px) - 别把变量设成
10000px这类夸张值——动画会拖沓，低端设备上尤其明显，而且可能触发 layout thrashing
JS 动态注入高度时，max-height 过渡为何仍会闪一下
常见原因是：JS 设置新高度后，浏览器还没完成重排（reflow），transition 就已触发，导致从 0 → 10000px（fallback）再跳到真实值。关键在于时机控制和 fallback 设计。
- 必须等元素已渲染、有 layout 后再读
scrollHeight，推荐在offsetParent存在且offsetHeight > 0时读取 - CSS 中不要只写
max-height: var(--real-height)，一定要带 fallback：max-height: var(--real-height, 400px) - 收起时，先移除高度变量，再加
max-height: 0类；展开时，先设变量，再加max-height: var(--real-height, 400px)类——顺序错就容易闪 - 避免在
display: none元素上读scrollHeight，它永远是 0
真正省心又可靠的混合写法
不依赖 JS 也能应付多数场景，关键是把变量当「策略开关」，而不是「数据管道」。
- 用媒体查询 + CSS 变量分层定义阈值：
@media (min-width: 768px) { :root { --panel-max: 600px; } } - 折叠状态统一用
max-height: 0，展开状态用max-height: var(--panel-max)，同时加overflow: hidden - 需要更高精度时，只对「首次展开」走 JS 注入，后续复用该值，避免每次点击都重算
- 动画卡顿？加
will-change: max-height到容器，但仅限活动面板，别全局滥用
变量本身不会帮你算高度，但它能让你把「高度策略」从硬编码里解耦出来。真正难的从来不是怎么动，而是动之前，怎么让浏览器知道它该往哪动、动多远。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
