原生组件案例 03：Dark FAQ Accordion 深色主题 FAQ 组件

先看效果：

🌑 深色卡片风 UI

✨ 展开/收起有高度过渡，不卡顿

🔄 SVG 箭头自动旋转

⚡ 原生 <details> + Web Animations API，零依赖

🧠 技术亮点

// 用 WAAPI 接管高度动画
el.animate(
  { height: [start, end] },
  { duration: 200, easing: "ease-out" }
);

• <details>/<summary>：语义化 + 自带键盘可访问性

• SVG：不用切图，只靠 transform: rotate(90deg)

• 状态机：防止多次点击导致动画冲突

🎯 3 个核心点

1. 深色主题 + 高对比度标题高亮

2. Web Animations API 实现"丝滑开合"

3. 原生标签实现，更轻、更快、更兼容

🔗 获取完整代码

👇 点击「原文链接」查看（服务器有点慢，请耐心等待）：

• 可运行版本（HTML / CSS / JS）

• 在线演示效果

• 可直接套用的深色主题 FAQ 模板