details标签原生不支持CSS过渡动画，需用JavaScript监听open状态、动态计算内容高度并手动设置max-height过渡，同时保持aria-expanded同步和键盘可访问性。
details标签默认不支持CSS过渡动画
直接给 <details></details> 或 <summary></summary> 加 transition: max-height 0.3s 没用——因为 <details></details> 的展开/收起是靠浏览器原生的 open 属性切换实现的，而 max-height 从 0 到 auto 无法被 CSS 过渡识别。
用JavaScript监听open/closed状态并手动控制高度
必须绕过原生行为，用 JS 拦截点击、计算内容高度、再用内联样式驱动过渡。关键点：
- 阻止
<summary></summary>默认展开行为：event.preventDefault() - 用
getBoundingClientRect().height或scrollHeight获取真实内容高度 - 先设
max-height为当前值（比如 0），再用offsetHeight触发重排，再设为目标高度 - 过渡结束后清理内联样式，恢复为
max-height: none（否则影响响应式）
示例片段：
const details = document.querySelector('details');
const content = details.querySelector('div'); // 假设详情内容包在 div 里
details.addEventListener('click', (e) => {
if (e.target.tagName !== 'SUMMARY') return;
e.preventDefault();
if (details.hasAttribute('open')) {
content.style.maxHeight = content.scrollHeight + 'px';
// 强制重排
content.offsetHeight;
content.style.maxHeight = '0';
details.removeAttribute('open');
} else {
content.style.maxHeight = '0';
content.offsetHeight; // 触发重排
content.style.maxHeight = content.scrollHeight + 'px';
details.setAttribute('open', '');
}
});
content.addEventListener('transitionend', () => {
if (!details.hasAttribute('open')) {
content.style.maxHeight = '0';
} else {
content.style.maxHeight = 'none';
}
});
注意summary伪元素与键盘可访问性
原生 <details></details> 支持空格/回车展开、屏幕阅读器朗读状态，自己接管后容易破坏：
立即学习“前端免费学习笔记（深入）”；
- 别移除
<summary></summary>，它仍是焦点和语义必需节点 - 用
aria-expanded手动同步状态：summary.setAttribute('aria-expanded', details.hasAttribute('open')) - 监听
keydown事件，对Space和Enter做相同处理 - 避免用
display: none隐藏内容——会影响可访问性，坚持用max-height+overflow: hidden
移动端Safari的scrollHeight计算异常
iOS Safari 在 <details></details> 初始隐藏时，scrollHeight 可能返回 0 或错误值，尤其内容含图片或字体未加载完时：
- 延迟计算：用
requestAnimationFrame或img.onload确保 DOM 渲染完成 - 兜底策略：预设一个最小高度（如
20px），或用offsetHeight替代scrollHeight（但需确保内容已 layout） - 避免在
visibility: hidden容器中使用——改用opacity: 0; position: absolute等不影响 layout 的隐藏方式
动画本身简单，但边界情况多，最常出问题的是高度测量时机和可访问性补全。别省略 transitionend 清理逻辑，否则后续 JS 操作可能读到错误的 max-height 值。
