height: 0 → auto 无效因css不支持auto插值，需用max-height替代并设合理固定值（如280px），配合overflow: hidden和transition；details需手动加动画，单开单关必须js实现。
为什么不能直接用 height 过渡
直接写 height: 0 → height: auto 是无效的：CSS transition 不支持 auto 值的插值计算，动画会直接跳变或完全不触发。浏览器无法知道“auto”具体是多少像素，也就没法做中间帧过渡。
常见错误是看到效果一闪而过、内容瞬间出现/消失，或者根本没动画——十有八九就是误用了 height: auto。
- 必须用
max-height替代height -
max-height需设一个「足够大但不过分夸张」的固定值（比如600px），确保内容能完全展开 - 同时配合
overflow: hidden，否则超出部分会溢出显示 - 过渡属性写全：
transition: max-height 0.3s ease, opacity 0.2s ease（加opacity可缓解文字闪动）
怎么让 max-height 动画看起来自然
设太小（如 max-height: 100px）会导致内容被截断；设太大（如 max-height: 9999px）会让动画时间拉长、收起时有明显延迟——尤其内容很短时，视觉上像“慢慢吞吞地缩回去”。
实操建议：
- 预估最大内容高度：标题+3段文字+内边距 ≈ 200–300px，设
max-height: 280px比较稳妥 - 如果内容高度差异极大（比如 FAQ 项从 1 行到 10 行不等），可考虑 JS 动态设置
max-height为element.scrollHeight，但纯 CSS 场景下保守取值更可靠 - 避免在
max-height上用cubic-bezier(.25,.46,.45,.94)这类强缓动——收起末段容易显得拖沓，用ease-in-out或默认ease更平衡
details + summary 要不要加 transition
原生 <details></details> 标签本身没有展开动画，open 属性切换是即时的。想加平滑过渡，必须手动干预，且只能作用于内部内容，不能直接过渡 <details></details> 自身。
正确做法：
- 给
<details> > *</details>（除<summary></summary>外的所有子元素）设max-height和overflow: hidden - 用
details[open] > *触发展开态的max-height值 -
<summary></summary>必须是<details></details>的第一个子元素，且不能自闭合（<summary></summary>会失效） - Safari 15.4 以下不支持
summary::marker，旧版本需用list-style: none+::after模拟箭头
单开单关手风琴必须用 JavaScript 吗
是的，纯 CSS 无法实现「点击一个，其他自动关闭」。因为 :checked 或 [open] 都是独立状态，彼此无联动。
如果坚持不用 JS，有两个妥协方案：
- 用
<input type="radio">+name统一命名，靠浏览器原生互斥逻辑控制——但要求所有面板共用同一个 name，且每次只能选中一个，适合 FAQ 类静态内容 - 放弃「强制单开」，接受原生
<details></details>的多开自由模式，语义更合理，维护成本更低 - 若必须 JS 控制，监听
toggle事件比监听 click 更准确（支持空格键、Enter 键触发）
真正容易被忽略的是可访问性：用 <button></button> 或 <summary></summary> 而不是 <div> 做触发器，才能保证键盘用户和读屏软件正常操作。动画本身只是锦上添花，结构语义和焦点管理才是基础。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
