details标签无法实现动态加载动画，因其仅支持同步的open状态切换，缺乏pending等异步状态；正确做法是分离职责：用details管理折叠，用独立loading元素配合fetch处理异步反馈。

details 标签本身不支持动态加载动画——它没有加载状态、不触发网络请求、也不提供 loading 或 progress 事件。所谓“配合 CSS 绘制动态加载动画”，本质是混淆了两个独立机制：一个是语义化折叠面板（details），另一个是异步操作反馈（loading 动画）。强行把 loading 效果塞进 details 里，只会导致行为错位、可访问性下降、逻辑难维护。

为什么不能直接用 details 实现 loading 动画

浏览器对 details 的处理完全同步：点击即切换 open 属性，不等待任何异步过程。你无法用它表达“正在请求数据中”这种中间态：

• details[open] 只有 true/false，没有 pending/loaded/error 状态
• CSS 无法监听 JS 中的 fetch 状态，details 也无对应钩子
• 若在 summary 里加旋转图标，用户点击后图标立刻翻转，但数据可能还没回来——视觉与实际脱节
• 屏幕阅读器会把 details 当作静态交互控件播报，不会理解“加载中”语义

真正该用的组合：fetch + details + loading 元素分离

要实现“点击展开 → 显示 loading → 渲染结果”，必须拆开职责，让每个部分干自己擅长的事：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 用 details 管理显隐状态和键盘导航（Enter/Space 触发）
• 用独立的 <div class="loading"> 放在内容区内部，初始显示，<code>display: block
• JS 中调用 fetch()，成功后用 innerHTML 替换 loading 元素，或用 classList.toggle() 切换可见性
• loading 元素本身用纯 CSS 实现（如 border: 2px solid #eee + border-top-color: #3498db + animation: spin 1s linear infinite）

details 内部 loading 动画的 CSS 实操要点

如果 loading 元素放在 details 内容区里，注意三点：

• loading 元素必须设 display: flex 或 display: inline-block，否则 animation: spin 在 display: inline 下可能不触发重绘
• 避免给 details 或 summary 加 transition 去“模拟 loading”，这会让展开动画和 loading 感知混在一起，用户分不清是界面在动还是数据在来
• 加载完成时，移除 loading 元素前，先确保新内容已 layout 完成（比如等 img 的 load 事件），否则 scrollHeight 计算可能偏小，影响后续 max-height 动画

最易被忽略的是：loading 动画的存在意义是「管理用户预期」，而 details 的存在意义是「提供可折叠的信息容器」。把二者耦合，等于让一个语义标签承担状态反馈职责——这不是 CSS 能修好的问题，是结构设计偏差。