折叠区域展开动画失效是因为height:auto无法被CSS过渡识别；推荐用max-height替代，设足够大的值并配合overflow:hidden实现平滑过渡。
折叠区域展开时瞬间撑开，是因为默认没有过渡动画，高度从 0 直接跳到实际内容高度。用 transition-property: height 确实能加动画，但**直接过渡 height 通常无效或不自然**——因为 height: auto 无法被 CSS 动画识别，浏览器不知道“auto”具体是多少。
别直接 transition height: auto
CSS 的 transition 只对可计算的数值属性生效。height: auto 不是固定值，浏览器无法插值，所以常见表现是：展开时仍“啪”一下弹出，或者完全没动画。
- 写
transition: height 0.3s ease;+height: auto→ 动画失效 - 写死
height: 200px再过渡 → 不灵活，内容变长就溢出或留白
用 max-height 替代 height（最常用稳妥法）
把 height 换成 max-height，并设一个“足够大但不过分”的值（比如 500px），让浏览器能插值过渡：
- 收起状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 500px;（确保大于内容最大可能高度） - 加上：
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
✅ 优点：无需 JS 测高，兼容性好，动画平滑。
⚠️ 注意：max-height 值不能太小（否则截断），也不宜过大（动画时间拉长、有“慢吞吞”感）。
立即学习“前端免费学习笔记（深入）”；
用 transform + opacity 实现更轻量的视觉展开
如果不需要“高度渐变”效果，只要“出现+淡入+轻微缩放”，推荐用 transform 和 opacity：
- 收起：
opacity: 0; transform: scaleY(0.8); transform-origin: top; - 展开：
opacity: 1; transform: scaleY(1); transition: opacity 0.25s ease, transform 0.25s ease;
✅ 优势：GPU 加速、性能更好、无高度估算烦恼；适合卡片、提示框等非严格高度依赖场景。
真·动态高度？用 JS 配合 getComputedStyle（进阶可控）
当内容高度差异大、又必须精确过渡时，可在 JS 展开前读取真实高度：
- 先设
height: 0; overflow: hidden; - 展开前，用
element.scrollHeight获取内容真实高度 - 立即设
element.style.height = element.scrollHeight + 'px'; - 再用
setTimeout(() => { element.style.height = ''; }, 10)清除内联 height，回归 auto - CSS 只需：
transition: height 0.3s ease;
✅ 精准无误差，适合复杂表单、富文本折叠区。
⚠️ 需注意重排触发时机，避免布局抖动。
基本上就这些。优先试 max-height 方案，简单项目够用；追求性能选 transform；要求严丝合缝再上 JS 测高。关键是别卡在 height: auto 上硬刚 —— 浏览器不支持，不是你代码写错了。
