不能用 height: auto 做过渡动画，应使用 max-height 配合固定安全值（如 60rem）和 overflow-hidden/class 切换实现平滑手风琴效果，避免 vh 单位及内联样式。
不能直接用 height: auto 做过渡动画，浏览器无法插值计算，结果就是“啪”一下展开或收起——这是所有纯 CSS 手风琴卡住的第一关。
为什么 max-height 是唯一靠谱的替代方案
浏览器能对 max-height 做线性插值，只要它是个确定数值。但这个值不能乱设：max-height: 100vh 会因视口缩放/键盘弹出抖动；max-height: 1000px 会导致长内容被截断或动画拖沓。安全值推荐：max-height: 60rem（约 960px），覆盖绝大多数 FAQ 段落；移动端可降为 max-height: 40rem。
- 设太小：内容撑开后溢出、文字被裁切
- 设太大：动画时间失真（比如 0 → 1000px 耗时远超实际内容高度所需）
- 绝对不要用
vh/vmax单位——滚动、横屏、软键盘都会触发重排
用 Tailwind 的 class 切换代替 JS 直接写 style
别在 JS 里写 el.style.maxHeight = el.scrollHeight + 'px'。这种写法破坏样式隔离、难测试、且和 Tailwind 的原子类体系冲突。正确做法是用 class 控制状态，再靠 CSS 变量或预设 class 控制 max-height 和 overflow。
- 折叠态：
max-h-0 overflow-hidden - 展开态：
max-h-[60rem] overflow-visible（注意用方括号语法避免 Tailwind 默认不生成该值） - 加过渡：
transition-max-h duration-300 ease-in-out - 若需动态高度适配，可在 JS 中切换 class 后，用
getComputedStyle(el).maxHeight验证是否生效，而非读取scrollHeight
Flowbite 手风琴组件的 data-accordion 属性陷阱
Flowbite 的 data-accordion="collapse" 看似省事，但它依赖 JS 初始化，并隐式绑定 click 事件。一旦你手动修改 DOM 或用 Alpine/Vue 动态渲染，data-accordion-target 就可能失效，错误信息通常是 Cannot read property 'addEventListener' of null。
- 检查目标元素是否存在且 id 匹配：
data-accordion-target="#accordion-collapse-body-1"必须对应真实存在的id="accordion-collapse-body-1" - 避免在 SSR 渲染中提前执行 Flowbite init —— 它会找不到挂载节点
- 如需服务端渲染兼容，建议改用纯 CSS 方案（如
input[type="checkbox"]+:checked） - Flowbite 默认禁用
transition，需额外加transition-all或自定义transition-max-h
真正麻烦的不是怎么展开，而是怎么让「收起」也平滑——很多人只写了展开的 max-h-[60rem]，却忘了收起时必须回到 max-h-0，且两者都要带 overflow-hidden，否则内容会突然闪现或留白。这个细节在快速复制示例时最容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
