toggle事件本身不解决卡顿，真正卡顿源于错误操作：反复读scrollHeight、未强制重排、动画中修改open属性；正确做法是分步设置maxHeight并调用offsetHeight触发重排。
details 的 toggle 事件本身不解决卡顿，它只是个通知钩子；真正卡顿的根源在于你用它做了错误的事——比如反复读 scrollHeight、没强制重排、或在动画中途改 open 属性。
为什么监听 toggle 就会卡？常见错误现象
直接在 toggle 回调里写 content.style.maxHeight = content.scrollHeight + 'px'，结果动画一卡一卡，收不严、展开一半停住，甚至 Safari 下完全不动。这不是浏览器 bug，是你没处理好 DOM 渲染节奏。
-
scrollHeight在元素不可见（display: none或父级hidden）时返回0，但很多人忘了临时显式设visibility: hidden+position: absolute这类“隐形可见”状态再读 - 没调用
content.offsetHeight强制触发重排（reflow），浏览器根本不知道你刚改了maxHeight，过渡就断在第一帧 - 每次点击都重新计算
scrollHeight，图片还没加载完、字体还没就绪，值就偏小——动画到一半高度不够，自然卡住
展开/收起逻辑必须分两步走
不能把状态切换和样式更新混在一次同步操作里。DOM 渲染是异步的，toggle 事件触发时，details.open 已经是最终值，但样式还没应用，maxHeight 过渡还没开始。
- 展开时：先设
content.style.maxHeight = '0'→ 立即调content.offsetHeight→ 再设content.style.maxHeight = content.scrollHeight + 'px' - 收起时：反过来，先设目标高度 →
offsetHeight→ 再设'0'；千万别先设details.open = false再动maxHeight，否则原生行为会抢跑，覆盖你的过渡 - 如果内容含图片，
scrollHeight可能不准，建议加兜底：getComputedStyle(content).height !== 'auto' ? getComputedStyle(content).height : content.scrollHeight + 'px'
动画完成判断别信 transitionend
transitionend 在 maxHeight 上极不可靠：从 0 → 327px 和 327px → 0 的实际过渡时间可能不同；用户中途再点一下，动画被中断，事件压根不触发。
- 收起完成的可靠信号是：下一帧检查
content.offsetHeight === 0（需配合requestAnimationFrame） - 展开完成看
content.scrollHeight === parseInt(getComputedStyle(content).maxHeight)，但注意这个值带单位，得转成数字 - 做手风琴效果时，关闭其他
details前，必须等当前content.offsetHeight真变成0才能开下一个，否则视觉错乱
最易被忽略的一点：服务端渲染（SSR）返回的 HTML 若带 open 属性，客户端 JS 初始化前得先手动移除它，否则 localStorage 还原状态 + 动画接管会打架——页面一加载就“闪开”，动画彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
