details标签无法直接用transition实现展开动画，因其open属性切换不触发css可插值属性变化；需手动设置max-height固定值（如300px）并配合js测量scrollheight，同时注意safari兼容性及移动端硬件加速问题。
details标签加transition为什么没反应
直接给details或summary写transition: max-height 0.3s完全无效——因为open属性切换不触发任何可插值的CSS属性变化，浏览器原生展开是硬编码的即时行为，不是靠height或max-height控制的。你看到的“没动画”，不是漏写了transition，而是机制上就不走这条路。
用max-height过渡必须手动设固定值
想让内容区有平滑展开效果，唯一能稳定过渡的CSS属性是max-height，但它有个硬前提：终值必须是具体像素值（比如400px），不能是none或fit-content，否则transition直接跳变。
- 内容高度较稳定（如3–6行文本+固定padding）时，设
max-height: 300px最省事，兼容所有现代浏览器 - 含图片、动态加载文本或字体未就绪时，
scrollHeight常读不准，尤其在Safari中；需先触发重排：content.offsetHeight或getComputedStyle(content).height - 移动端WebView（如微信WKWebView、QQ X5）可能忽略
max-height过渡，建议加overflow: hidden和opacity: 0.99强制硬件加速
summary箭头旋转动画的兼容写法
summary::marker在Safari 15.4之前完全不支持，只写它等于白费。稳妥方案是用summary::after插入图标，并绑定details[open]状态做旋转。
- 必须显式写
transition: transform 0.2s ease，且summary保持display: inline（默认就是） - 隐藏原生箭头要同时写
list-style: none和summary::marker { display: none; }，但后者仅对Safari 15.4+有效 - 如果
summary里嵌了h5等块级元素，箭头容易错位；建议把标题设为display: inline-block并清空margin
toggle事件监听中容易踩的坑
JS接管动画后，toggle事件是唯一可靠入口，但执行顺序和重排时机稍有偏差就会导致动画卡顿或高度截断。
- 展开前必须先设
max-height: 0，再调用content.offsetHeight强制同步布局，再赋值scrollHeight；收起时顺序相反 - 多个
details要做手风琴效果？纯CSS做不到，必须在toggle回调里遍历其他项并设open = false - 图片未加载完成时
scrollHeight偏小，可监听img.onload后重新计算，或改用transform: scaleY()绕过高度测量
scrollHeight失准。这时候与其反复调试，不如退一步用固定max-height配overflow: auto，至少保证功能可用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
