details标签原生不支持关闭动画，因display切换无法触发CSS过渡；可靠方案是用max-height+overflow模拟，需设固定max-height值并配合opacity和overflow:hidden控制显隐。
details标签原生不支持关闭动画
浏览器对 <details></details> 的展开/收起是纯 CSS 切换 open 属性，内部内容用 display: block/none 控制，而 display 无法触发 CSS 过渡（transition）。所以直接写 transition: opacity 0.3s 对子元素无效——关掉瞬间就消失了，根本没机会淡出。
必须用 max-height + overflow 模拟过渡
这是目前最可靠、无需 JS 的方案：把 <summary></summary> 后的内容包裹一层，并用 max-height 配合 overflow: hidden 控制显隐。关键点在于：
-
max-height必须设为一个**固定且足够容纳内容的值**（比如500px），不能用fit-content或unset，否则过渡失效 - 关闭时靠
max-height: 0+opacity: 0联动，但要注意opacity只是视觉淡出，真正隐藏得靠overflow: hidden防止内容溢出 - 需要给内容区加
margin-top: 0（重置 summary 默认的 margin），否则动画会错位
<details>
<summary>点击展开</summary>
<div class="details-content">
这里是详情内容……
</div>
</details>
<style>
.details-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
details[open] .details-content {
max-height: 500px;
opacity: 1;
}
</style>
JS 方案更可控，但要处理 open 状态同步
如果内容高度差异大，或想精确控制动画结束时机（比如动画完再移除 DOM），就得用 JS。核心是监听 toggle 事件，手动添加类并监听 transitionend：
- 不要直接监听
click，要用details.addEventListener('toggle', ...)，它在open属性变更后触发 - 动画开始前需强制 reflow（比如读一次
offsetHeight），否则浏览器可能合并样式计算，导致动画不触发 - 关闭动画结束后，建议延迟
setTimeout(() => { el.remove(); }, 0)或清空内容，避免残留占位
移动端 Safari 有兼容性坑
iOS 15.4+ 才完整支持 <details></details> 的 toggle 事件；更早版本可能不触发，或 open 属性更新滞后。若需兼容，建议 fallback 到手写的 aria-expanded + hidden 控制逻辑，而非强依赖原生 behavior。
立即学习“前端免费学习笔记（深入）”；
另外，max-height 动画在部分 Android WebView 中会有轻微卡顿，不是所有机型都平滑——真要追求极致体验，还是得用 GSAP 或 framer-motion 做 height 计算 + transform 缓动，但那就超出 <details></details> 的轻量定位了。
