max-height 是最实用的过渡属性，因其支持数值插值且不破坏文档流；设为足够大的固定值（如500px）可覆盖多数内容高度，配合 overflow: hidden 实现平滑下拉动画。
不能直接用 height: 0 ↔ height: auto 配合 transition 实现平滑下拉——浏览器无法插值 auto，动画会跳变或完全失效。
为什么 max-height 是最实用的过渡属性
浏览器能对具体数值做线性插值，max-height 正好满足这个条件，且不破坏文档流。它不要求你提前知道内容高度，只要上限值足够大（比如 500px），就能覆盖绝大多数面板内容。
-
max-height: 0+overflow: hidden可以让元素视觉上“消失”，又保留可动画性 - 设成
max-height: 500px后，哪怕内容只有60px高，动画也会匀速走完 500px 的距离——时间可控，但别设过大（如9999px），否则短内容展开也拖沓 - 必须同步过渡
padding或opacity，否则展开瞬间顶部/底部留白突兀 - 别忘了加
overflow: hidden，否则内容会撑开容器、溢出边框
transition 写在哪？哪些属性真能动
只写 transition: max-height 0.3s 是不够的。如果面板内有 padding、margin 或子元素带 border，它们不会随 max-height 收缩，视觉上会“顶出来”。
- 推荐组合：
transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.2s ease - 避免在动画容器上设
border+box-sizing: content-box，border 会参与高度计算，导致抖动 - 若内容区本身有内边距，建议把
padding挪到子容器里，父面板只控制max-height和overflow -
ease-in-out比linear更自然；时长控制在0.25s–0.35s最稳，太短像闪现，太长显迟钝
JavaScript 切换类时动画不触发？关键在重排
单纯 el.classList.toggle('is-open') 在 DOM 刚插入、或初始 display: none 时大概率跳过动画——浏览器没“看到”前后两个状态。
- 展开前先强制设
el.style.maxHeight = '0'，再调el.offsetHeight触发重排，再加is-open类 - 收起时可直接移除类，但如果要更稳：先读当前
getComputedStyle(el).maxHeight，设为该值，再设回0，最后移类 - 绝对不要用
display: none控制显隐——它会让transition完全失效 - 多个面板互斥？点击后遍历其他面板移除
is-open即可，无需计时器或额外状态管理
真正难的不是写对那几行 CSS，而是确保每次展开都基于一个“浏览器可测量”的起点——这往往被忽略，直到上线后发现某些面板点一下就弹开、不带动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
