height: auto无法过渡，因浏览器无法对非数值的auto进行插值计算；必须用max-height配合固定值（如60rem）与overflow-hidden实现平滑动画。
不能用 height: auto 做过渡动画，必须用 max-height 配合固定值 + overflow-hidden 切换才能实现真正平滑的展开收起。
为什么 height: auto 过渡会失效
浏览器无法对 auto 值做线性插值，写 transition: height 0.3s + height: auto 的结果就是“啪”一下弹出，毫无过渡。哪怕改成 height: 100% 也不行——百分比在非 flex/grid 容器里没参考基准，照样跳变。
常见错误现象：
-
.accordion-content { height: 0; transition: height 0.3s; }→.open .accordion-content { height: auto; }：动画不触发 - 用
vh单位（如max-height: 100vh）：软键盘弹出、横屏切换时视口重排，面板抖动甚至错位
max-height 安全值怎么设才不翻车
设太小会裁切内容；设太大导致动画拖沓、滚动条闪动、视觉失真。关键不是“撑满”，而是“够用且可控”。
- 桌面端推荐
max-height: 60rem（≈960px），覆盖绝大多数 FAQ 段落 - 移动端可降为
max-height: 40rem（≈640px），避免长内容撑破视口 - 绝对不要用
max-height: 1000px或max-height: 100vh - Tailwind 中需用方括号语法启用非常规值：
max-h-[60rem]，否则 JIT 编译不生成该类
用 class 切换代替 JS 写内联 style
别在 JS 里写 el.style.maxHeight = el.scrollHeight + 'px'——这破坏 Tailwind 的原子类体系，难调试、难测试、样式不可预测。
正确做法是只切换 class，把高度逻辑交给 CSS：
- 收起态：
max-h-0 overflow-hidden - 展开态：
max-h-[60rem] overflow-visible（注意不是overflow-auto，否则滚动条干扰动画） - 加过渡：
transition-max-h duration-300 ease-in-out - 若需动态适配，JS 只负责切换
data-open="true"，CSS 用变量驱动：max-height: var(--accordion-open)，并在tailwind.config.js中注册'open': '60rem'
Flowbite 或 shadcn-vue 等封装库的隐藏坑
Flowbite 的 data-accordion="collapse" 看似省事，但依赖 JS 初始化。一旦你用 Alpine/Vue 动态渲染或 SSR 预渲染，data-accordion-target 就可能找不到对应 id，报错 Cannot read property 'addEventListener' of null。
shadcn-vue 虽基于 reka-ui 封装了动画细节，但它默认禁用 transition，需手动加 transition-all 或显式声明 transition-[max-height] 才生效。
真正容易被忽略的是：很多人只写了展开的 max-h-[60rem]，却忘了收起时必须回到 max-h-0，且两者必须共用同一 transition 声明，否则「收起」依然突兀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
