要为 details 标签添加展开/收起动画，需用 JS 手动控制 max-height 和 overflow，缓存 scrollHeight 并正确处理 toggle 事件时机与 localStorage 持久化顺序。
details 标签的 open 属性不触发 CSS transition
直接写 details[open] .content { max-height: 200px; transition: max-height 0.3s; } 是无效的——open 是布尔属性，切换时 DOM 状态立即改变，但浏览器不会对它本身做过渡。原生展开/收起是“硬切换”，没有动画参与。
想加动画，必须放弃依赖 open 控制样式，改用 JS 手动管理 max-height 和 overflow，让 CSS 过渡真正作用在可动画属性上。
-
max-height是唯一能平滑过渡的高度相关属性（height、display都不支持 transition） - 初始状态设为
max-height: 0; overflow: hidden; - 目标值不能写死，得动态读取内容真实高度，否则会截断或留白
scrollHeight 读取前必须确保元素可见但不可见
scrollHeight 在 display: none 或 visibility: hidden 下返回 0，但又不能真让它显示出来干扰布局。正确做法是临时设为 position: absolute; visibility: hidden; opacity: 0;（或仅 position: absolute + clip: rect(0 0 0 0)），再读取。
读完立刻恢复原样式，避免视觉闪动或布局偏移。
立即学习“前端免费学习笔记（深入）”；
- 别在
toggle事件回调里反复读 —— 每次点击都查一次scrollHeight开销不小 - 建议首次展开后缓存该值，后续收起/再展开复用
- 如果内容可能动态变化（如异步加载、用户编辑），需重新测量并更新缓存
toggle 事件里不能直接设 open=true/false 同步动画
toggle 事件只告诉你“用户点了”，此时 DOM 渲染还没开始，max-height 还没开始过渡。如果你在事件里立刻执行 el.open = true，会跳过你写的过渡逻辑，导致“闪开”或无动画。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
展开和收起必须分两步走：
- 展开：先设
el.style.maxHeight = el.scrollHeight + 'px'→ 然后下一帧（requestAnimationFrame）再设el.open = true - 收起：先设
el.open = false→ 下一帧再设el.style.maxHeight = '0'
顺序错了就会跳变，尤其收起时如果先设 max-height: 0 再设 open = false，动画根本不会触发。
localStorage 持久化与动画初始化顺序冲突
从 localStorage 读取状态后直接 el.toggleAttribute('open', saved)，会立即触发原生展开行为，覆盖你的 max-height 动画流程。
持久化还原必须在 DOM 加载完成、但动画逻辑初始化之前完成：
- 先用
el.toggleAttribute('open', saved)设置初始状态 - 再调用动画初始化函数（含
max-height初始设为0、绑定toggle事件等） - 每个
details必须有唯一data-persist-key，否则多个面板互相覆盖状态
服务端渲染（SSR）时若 HTML 已带 open 属性，客户端 JS 初始化前要先手动移除它，再按上述顺序还原，否则动画逻辑会被绕过。
