details 的 open 属性无法直接触发动画，因布尔属性切换导致 DOM 状态突变；需用 JavaScript 监听 toggle 事件，结合 scrollHeight 动态控制 height 过渡，并保持原生可访问性。

details 标签的 open 属性无法直接触发 CSS 过渡

因为 open 是布尔属性，切换时 DOM 状态突变（open 值从无到有或反之），CSS 无法监听这种布尔变化来触发动画。浏览器不会对 height、opacity 等样式做自动插值——除非你手动控制这些样式。

用 JavaScript 监听 toggle 并动态加 class 控制过渡

核心思路是：拦截原生展开/收起行为，改用 class 控制高度和可见性，并配合 max-height 或 height 的 CSS 过渡。常见错误是直接对 height: auto 做 transition，这无效——浏览器无法计算 auto 的终点值。

• 给 <details> 添加一个固定最大高度（如 max-height: 500px），再设 transition: max-height 0.3s ease-out
• 初始状态加 class 如 is-closed，设 max-height: 0 + overflow: hidden
• 监听 toggle 事件，在回调里用 el.classList.toggle('is-open') 切换状态
• 注意：首次展开前需强制重排（如读取 offsetHeight）才能让浏览器“知道”目标高度

更稳妥的做法：用 scrollHeight 动态获取内容高度

避免硬编码 max-height 值，适配任意内容长度。关键点在于：动画开始前必须先让元素处于“已渲染但隐藏”状态，才能读到真实 scrollHeight。

html-deploy

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

下载

• 在 details 上设 overflow: hidden 和 height: 0（非 display: none）
• 监听 toggle，若 details.open === true，先设 height: 0，offsetHeight 强制重排，再设 height: ${details.scrollHeight}px
• 收起时反向操作：设 height 为目标值，过渡结束后再设回 height: 0 并移除内联 style
• 配套 CSS 只需 transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1)

兼容性与可访问性注意事项

原生 <details><summary> 有键盘支持（空格/回车切换）、屏幕阅读器语义和默认焦点管理。自己接管动画后容易破坏这些特性。

立即学习“前端免费学习笔记（深入）”；

• 务必保留 <summary>，不要用 div 替代，否则 ARIA role 丢失
• 不要阻止默认 toggle 事件，而是用 event.preventDefault() + 手动调用 details.open = !details.open 来保持同步
• IE 完全不支持 <details>，需降级为 div + JS 模拟，且不能依赖 open 属性
• 动画时间别超过 300ms，否则影响操作节奏；移动端慎用 transform 或 opacity 单独过渡，可能引发重排抖动

细节动画本身不难，难的是在保持语义、可访问性和响应式表现之间找平衡点。最易被忽略的是 scrollHeight 读取时机——DOM 渲染未完成就去读，拿到的就是 0。