因height:auto不可动画，浏览器无法计算中间帧，导致跳变；须改用max-height配具体像素值（如scrollheight+20）和overflow:hidden实现平滑过渡。
为什么直接用 height: auto 无法实现折叠动画
因为 CSS 的 transition 不支持 height: auto —— 浏览器无法计算“从 0 到 auto”的中间帧，结果就是内容瞬间闪现或收起后留白。你看到的“没动画”“跳变”“高度截断”，基本都源于这个错误写法。
必须改用 max-height，它支持从 0 到具体像素值（如 300px）的过渡。但注意：max-height 的终点值不能随便写，太小会卡住动画，太大又拖慢收起速度。
- 终点值建议设为
content.scrollHeight + 20（JavaScript 动态获取），不是拍脑袋填500px - 必须搭配
overflow: hidden，否则内容会溢出破坏折叠视觉 -
max-height: 0和max-height: none效果不同，后者不触发过渡，要用具体数值
如何用 JavaScript 正确触发动画流程
单纯切 classList 不够。因为 max-height 从 0 变成目标值前，浏览器还没来得及计算真实高度，动画就会以 0 → 0 开始，导致失效。
关键在于强制重排（reflow）：先设 max-height 为目标值，再用 void element.offsetHeight 触发计算，最后设 opacity 或添加类名。
- 展开时顺序：设
max-height→void offsetHeight→ 设opacity: 1或加.show类 - 收起时顺序：先设
opacity: 0→ 再设max-height: 0（此时过渡自然向下收缩） - 避免用
display: none/block，它不可动画，且会中断 transition 流程
details + summary 能加动画吗
不能。原生 <details></details> 和 <summary></summary> 标签自带展开/收起逻辑，但内部不走 CSS transition，浏览器控制显示状态，max-height、opacity 等样式对它无效。
如果你只需要基础交互、语义化强、兼容性好（Chrome/Firefox/Edge 全支持），它很省事；但只要提“平滑”“淡入”“高度渐变”，就必须放弃原生方案，手写 JS + CSS 控制。
- 想保留语义又加动画？可监听
toggle事件，手动同步状态到自定义容器 - 不要试图给
<summary></summary>加transition，它只响应点击，不响应样式变化 - 移动端注意：原生
<summary></summary>默认点击区域小，需用padding扩大热区
多个折叠面板共存时的常见坑
最典型的是“点开一个，其他没自动收起”。这不是 CSS 问题，是 JS 状态管理疏漏：每个面板独立切换，没做互斥逻辑。
另一个隐形问题是高度计算错乱——比如用 scrollHeight 获取高度时，内容里有图片未加载完成，scrollHeight 返回的是 0 或偏小值，导致动画中途卡住。
- 互斥控制：点击新面板前，先遍历所有已展开的面板，执行收起流程（设
opacity: 0→max-height: 0） - 图片延迟加载场景：监听
img.onload或用requestIdleCallback延迟读取高度，或 fallback 到预估高度（如行高 × 行数 + 内边距） - 避免在
resize事件里频繁重算所有面板高度，性能差；应节流或仅更新当前可见面板
真正难的不是写出来，而是让动画在各种内容长度、图片加载时机、父容器 flex/grid 布局下都保持稳定。每次加新内容，最好手动测一次最大高度和最小高度两种边界情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
