无法用toggle事件实现平滑展开动画，因HTML无toggle事件；需通过点击切换类名，配合CSS过渡属性（如max-height或transform:scaleY）驱动动画，避免使用display:none。
直接用 toggle 事件做平滑展开动画是行不通的——HTML 标准里根本不存在 toggle 事件。你真正需要的是点击触发状态切换（比如类名增删），再靠 CSS 过渡属性驱动动画。所有“toggle 动画失效”的问题，90% 都卡在误以为 display 或 visibility 可以被 transition 控制。
为什么 display: none + transition 完全没用
浏览器不支持对 display 做过渡：它只有离散值（block、none、flex…），没有中间状态，transition 对它完全静默。一旦设成 display: none，元素立刻从渲染树中移除，后续 height/max-height 动画也会断掉。
- 错误写法：
.panel { transition: display 0.3s; }+.panel.hidden { display: none; } - 后果：点击后内容瞬间消失/出现，毫无动画
- 替代方案必须保持元素在流式布局中存在，只改变视觉表现或占用空间的方式
用 max-height 实现向下展开的实操要点
max-height 是最常用、兼容性最好的高度过渡方案，但它不是“设 0 → auto”就能动——auto 无法参与过渡计算，必须用固定数值。
- 初始状态写
max-height: 0+overflow: hidden - 展开时设一个“足够大但不过分”的值，比如
max-height: 500px（比内容最大可能高度略高） - 若内容高度波动大，可 JS 动态读取
scrollHeight后赋给max-height，再加transition - 收起前需确保
max-height被设回 0，且不能依赖height: 0——因为height: auto会撑开容器，破坏动画连贯性
transform: scaleY(0) 更轻量，但要注意布局影响
用 transform: scaleY(0) 配合 transform-origin: top 能实现纯 GPU 加速的垂直折叠，不触发重排，性能优于 max-height。
立即学习“前端免费学习笔记（深入）”；
- 优点：动画丝滑，尤其适合 SVG 容器、固定宽高模块
- 缺点：元素仍占文档流位置（除非额外加
position: absolute），可能影响下方元素布局 - 务必搭配
transform-origin: top，否则缩放中心默认在中间，看起来像“塌陷”而非“收起” - 别忘了加
overflow: hidden，否则缩放过程中内容可能溢出
JavaScript 触发时容易漏掉的强制重排步骤
当你用 JS 先改类、再改 max-height，浏览器可能把两次样式变更合并优化，导致动画不触发。必须手动“打断”这个优化链。
- 典型错误：直接
el.classList.add('open'); el.style.maxHeight = '500px'; - 正确做法：先加类，然后强制读取一个布局属性（如
offsetHeight），再设max-height - 更稳妥写法：
requestAnimationFrame(() => { el.style.maxHeight = '500px'; }); - 收起时同理：先设
max-height为当前值（用getComputedStyle读），再requestAnimationFrame设回 0
真正难的不是写出第一版动画，而是让展开/收起在各种内容高度、嵌套层级、移动端 touch 事件下都稳定触发——max-height 的阈值、transform 的定位上下文、JS 中重排时机，这三个点任何一个没对齐，动画就会卡顿或跳变。
