details的open属性不触发CSS动画，必须用JavaScript监听toggle事件，动态设置内容区max-height并强制重排实现过渡；箭头旋转需结合details[open]选择器与transform过渡，注意Safari兼容性及scrollHeight读取时机。
open 属性不是动画开关，别用它直接控制 transition
details 的 open 属性只反映展开/收起状态，本身不触发 CSS 动画；浏览器对 details 内容的默认展开收起是“硬切换”，没有过渡效果。想加动画，必须绕过原生行为，用 max-height + overflow 模拟。
- 直接写
details[open] .content { max-height: 200px; }不可靠——内容高度不确定，设死值会导致截断或留白 - 正确做法：初始设
.content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }，再用 JS 动态读取scrollHeight赋值 - 注意：
scrollHeight在元素display: none时返回 0，所以得先临时设为block（但不可见）再读取，完事后恢复 - 避免在
toggle事件里反复计算——每次点击都查一次scrollHeight开销不小，建议缓存或节流
toggle 事件里读不到动画进度，状态同步要分两步走
toggle 事件只告诉你“用户点了”，不告诉你“动画进行到哪了”。如果你在事件回调里立刻读 el.open，拿到的是最终态，但此时 DOM 渲染可能还没完成，max-height 还没开始过渡。
- 展开逻辑应拆成：① 设置
max-height为目标值 → ② 等待下一帧（requestAnimationFrame）再设el.open = true - 收起逻辑反过来：① 先设
el.open = false→ ② 下一帧再把max-height设回 0（否则动画会跳变） - 不要监听
transitionend来判断收起完成——max-height从 0→目标值和目标值→0 的过渡时间可能不同，且中途取消动画时事件不会触发 - 如果要做手风琴效果（单开），关闭其他面板时，得先等当前面板动画结束再开下一个，否则视觉错乱
localStorage 持久化 + 动画叠加时容易状态错位
页面加载时从 localStorage 读取状态并设置 open，但如果同时启用动画，JS 设置 el.open = true 会立即触发原生展开，覆盖你精心写的 max-height 过渡逻辑。
- 持久化还原必须在 DOM 加载后、动画初始化前完成：先设
el.toggleAttribute('open', saved)，再初始化动画逻辑 - 千万别在
DOMContentLoaded里直接el.open = true——这会跳过你的max-height流程，导致“闪开”或无动画 - 多个
details共享同一 key 会互相干扰，每个必须有唯一data-persist-key，且还原后要手动触发一次动画初始化 - 服务端渲染（SSR）时，若 HTML 已带
open属性，客户端 JS 还原前要先移除它，否则和 localStorage 值冲突
IE 和旧 Safari 不支持 toggle 事件，降级方案不能只靠 CSS
Chrome 12+、Firefox 49+、Safari 15.4+ 支持 toggle，但 Safari 15.3 及更早版本、所有 IE 版本都不触发该事件——这意味着监听不到用户点击，动画逻辑会完全失效。
- 必须做特性检测：
if ('onbeforetoggle' in document.createElement('details'))（注意不是ontoggle） - 降级时不能只用
click监听summary：键盘操作（空格/回车）会被忽略，破坏可访问性 - 稳妥做法：监听
summary的click和keydown（keyCode 32/13），再手动调用el.open = !el.open并触发自定义动画 - CSS 方案（checkbox + label）虽兼容性好，但无法响应 JS 动态控制，也不支持
scrollHeight自适应，仅适合静态内容
