原生details/summary标签交互语义正确、零JS、无障碍友好，但无内置动画；自定义动画需JS配合CSS控制max-height，注意scrollHeight计算时机及Safari兼容性。

标签的原生展开交互本身不带动画，但它是语义正确、零 JS、无障碍友好的标准方案；自定义动画效果需要 JavaScript 配合 CSS 手动实现，不能靠纯 CSS transition 直接作用于

元素。

原生交互的核心优势

浏览器原生支持点击

切换 open 状态，自动适配键盘操作（空格/回车）、屏幕阅读器播报、焦点管理。这些能力开箱即用，无需额外代码维护。

• 必须是

  的第一个子元素，否则交互失效
• 添加 open 属性可默认展开：<details open></details>
• 多个
  设置相同 name 属性，可实现单选互斥（类似 radio 组）
• 监听 toggle 事件能获知状态变化，适合做日志记录或轻量逻辑响应

箭头图标与基础样式定制

默认的三角标记可通过伪元素替换，保持语义同时提升视觉一致性。

千问输入法

一款将语音输入与AI文字润色结合的智能输入法。

下载

• 清除原生 marker：summary { list-style: none; }
• 用 ::after 添加自定义箭头：summary::after { content: "▼"; transition: transform 0.2s; }
• 利用 details[open] summary::after 实现旋转动画，收起时 ▼，展开时 ▲
• 避免使用 appearance: none，以免破坏键盘焦点样式

实现平滑展开动画的关键步骤

原生行为是瞬时切换，要加动画必须接管高度控制——本质是模拟，不是增强。

• 给内容区（
  后的第一个兄弟元素）设 overflow: hidden
• 监听 toggle 事件，在展开时先设 max-height: 0，强制重排，再设为 scrollHeight
• 收起时反向：先设目标高度，重排，再设回 max-height: 0
• 图片未加载完成时 scrollHeight 可能偏小，需在 img.onload 后重新计算或用 ResizeObserver
• Safari 对 max-height 过渡支持较弱，建议加 will-change: max-height 提升渲染稳定性

什么情况下不该强行加动画

动画不是必需项，过度追求反而损害体验和可维护性。

• 内容高度差异大（如含多图、动态文本），难以预估 scrollHeight
• 仅需基础折叠功能的 FAQ、设置项，原生交互已足够清晰可靠
• 项目需支持 IE 或老旧 Android WebView，JS 方案需额外 polyfill
• 团队缺乏对重排机制的理解，容易写出卡顿或错位的动画逻辑