不能直接用 height: auto 做过渡动画，因为浏览器无法计算从 0 到 auto 的中间帧，导致动画失效而瞬间展开或收起；必须用 max-height 配合固定上限值（如 60rem）和 overflow-hidden 实现平滑过渡。
为什么不能直接用 height: auto 做过渡动画
CSS 不支持 height: auto 的过渡动画，浏览器无法计算从 0 到 auto 的中间帧，结果就是“啪”一下弹出或消失。这是所有纯 CSS 手风琴卡住的第一关。
max-height 是妥协解，但必须设合理上限
用 max-height 替代 height 是主流做法，但它依赖一个「足够大又不过大」的固定值。设太小会截断内容；设太大（比如 max-height: 1000px）会导致动画时长失真、滚动条闪动、甚至触发重排性能问题。
- 常见安全值：
max-height: 60rem（约 960px），覆盖多数 FAQ 段落 - 移动端可降为
max-height: 40rem，避免长内容撑开视口 - 绝对不要用
max-height: 100vh—— 视口高度变化时会抖动
用 CSS 变量接管展开/折叠状态，避免 JS 直接操作 style
把开关逻辑交给 class 切换，再用 CSS 变量控制 max-height 和 overflow，比在 JS 里写 el.style.maxHeight = '...' 更稳定、更易测试。
例如定义：
:root {
--accordion-open: 60rem;
--accordion-closed: 0;
}
.accordion-item[data-open="true"] .accordion-content {
max-height: var(--accordion-open);
overflow-y: visible;
}
.accordion-item[data-open="false"] .accordion-content {
max-height: var(--accordion-closed);
overflow-y: hidden;
}
JS 只需切换 data-open 属性值，样式完全由 CSS 变量驱动。
Tailwind 中嵌入变量要绕过 JIT 编译限制
Tailwind 默认不解析 var(--xxx)，直接写 max-h-[var(--accordion-open)] 会失效。必须用以下任一方式：
- 在
tailwind.config.js的theme.extend.spacing中注册变量别名：'open': '60rem', 'closed': '0'，然后用max-h-open - 用
@layer utilities手动加类：@layer utilities { .max-h-var-open { max-height: var(--accordion-open); } } - 放弃 Tailwind 工具类，对
.accordion-content单独写 CSS —— 对复杂手风琴反而更可控
别指望 bg-[rgb(var(--brand-primary))] 那套语法能迁移到 max-height 上，它只对颜色、阴影等有限属性生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
