details标签原生不支持transition动画，需用JavaScript监听toggle事件，通过动态设置内容区max-height并触发重排实现平滑展开收起，同时注意Safari兼容性及图片加载导致的scrollHeight不准问题。
details标签默认不支持CSS transition动画
直接给 <details> 或 <summary> 加 transition: max-height 0.3s 没用——因为 <details> 的展开/收起是通过浏览器原生的 open 属性切换的，不是靠 height/max-height 控制，且其内部内容没有初始 max-height 值，CSS 无法插值动画。
用 JavaScript 配合 max-height 实现平滑展开
核心思路：监听 toggle 事件，手动计算内容区高度，用 max-height 过渡替代原生行为。需注意几个关键点：
- 必须先将内容区（
<details>的第一个子元素，通常是<p>或<div>）设为overflow: hidden，否则高度变化时内容会“撑开”容器 - 初始
max-height设为0，展开时设为内容实际高度（用scrollHeight读取），收起时再设回0 - 过渡必须加在内容区上，不是
<details>或<summary> - 为避免 Safari 中
scrollHeight读取不准，建议在offsetHeight === 0时强制触发一次重排（如getComputedStyle().height）
const details = document.querySelector('details');
const content = details.querySelector(':scope > *:not(summary)');
details.addEventListener('toggle', () => {
if (details.open) {
// 展开：先设 max-height 为 0，强制重排，再设为 scrollHeight
content.style.maxHeight = '0';
content.offsetHeight; // 触发重排
content.style.maxHeight = content.scrollHeight + 'px';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
content.offsetHeight;
content.style.maxHeight = '0';
}
});
summary 标签本身不能直接加 hover 动画？可以但有陷阱
<summary> 是可聚焦、可点击的交互元素，支持 :hover、:focus 等伪类，但要注意：
- 默认情况下，
<summary>内部文字会被浏览器加一个「小三角」，这个三角在部分浏览器（如 Chrome）中无法用 CSS 覆盖，除非用list-style: none+ 自定义::marker（但::marker兼容性有限，Safari 15.4+ 才稳定） - 若想给 summary 添加旋转动画（比如点击时箭头翻转），不能只靠
transform: rotate(90deg)，得配合open属性状态：details[open] summary { transform: rotate(90deg); } - 动画必须加
transition: transform 0.2s ease，且确保summary是 inline 元素（默认），需先设display: inline-flex或inline-block才能生效
兼容性与性能提醒
这种 JS + CSS 的组合方案在 Chrome/Firefox/Edge（Chromium）中表现稳定，但 Safari 对 <details> 的 toggle 事件触发时机略有差异，有时会在用户松开鼠标前就触发，导致动画提前开始。更隐蔽的问题是：如果内容区里有图片或字体加载未完成，scrollHeight 可能读小了，造成动画中途截断——这时候得监听 img.onload 或 fontfaceobserver 后重新计算。
立即学习“前端免费学习笔记（深入）”；
