details标签原生不支持渐显动画，需用max-height+overflow:hidden模拟，内容区设transition，Safari需强制重排；summary箭头旋转用[open]选择器配合transform；微信/QQ/钉钉WebView兼容性差，需真机测试。
details 标签原生不支持渐显动画
直接给 <details> 或内容区加 opacity 过渡无效——因为浏览器切换 open 状态时，内容是「突然渲染并显示」的，DOM 节点始终存在，只是视觉上被隐藏（类似 display: none 的语义级控制），opacity 没有起始/结束值可插值。
用 max-height + overflow: hidden 模拟渐显
这是目前最稳定、无障碍友好的方案，但必须作用于内容区（即 <details> 下第一个非 <summary> 子元素），而不是 <details> 本身：
-
overflow: hidden必须加在内容区上，否则高度过渡时内容会溢出 - 初始
max-height: 0，展开时设为content.scrollHeight + 'px' - 过渡声明写在内容区上：
transition: max-height 0.3s ease-out - Safari 中
scrollHeight可能读错（尤其含图片时），需先触发重排：content.offsetHeight或getComputedStyle(content).height
summary 箭头旋转要绑定 open 状态
想让箭头随展开收起旋转，不能只靠 :hover，得用属性选择器：
- 清除默认小三角：
summary::marker { content: ""; }+summary::-webkit-details-marker { display: none; } - 自定义图标用
summary::after或summary::before，避免 Safari::marker兼容性问题 - 旋转动画写法：
details[open] summary::after { transform: rotate(90deg); }，且必须配transition: transform 0.2s ease - 别给
<summary>设display: inline-block，某些 Safari 版本会丢失点击热区
移动端 WebView 和 Safari 的真实坑点
微信、QQ、钉钉内嵌 WebView 对 <details> 支持极不稳定，不是“写了就有效”：
立即学习“前端免费学习笔记（深入）”；
- 部分 Android X5 内核下，
<summary>点击无响应，需检查是否被pointer-events: none或父级transform干扰 - iOS 微信（WKWebView）中，
scrollHeight在图片未加载完时返回 0，建议监听img.onload后重新计算 - 若内容区含
padding或border，scrollHeight不包含它们，导致收起时高度略高，动画末尾有“抖动” - 真机测试必须覆盖 iOS 微信、Android QQ、钉钉三端，模拟器无法复现多数问题
真正难的不是写那几行 JS 或 CSS，而是 scrollHeight 在不同加载时机、不同渲染管线下的偏差，以及 WebView 对 toggle 事件的静默吞掉。这些细节不踩一遍，很难相信它会出问题。
