手风琴 height 过渡失效需用 max-height 替代：设足够大的固定值（如 500px）配合 overflow-hidden 和 transition-max-height，避免 height: auto；Tailwind 中用 transition-[max-height] 和动态类名控制，注意无障碍属性同步。
手风琴展开时 height 过渡失效怎么办
直接对 height 设置 transition 在手风琴里基本没用——因为从 0 到 auto 的过渡浏览器不支持，会瞬间跳变。必须绕开 height: auto。
常见错误写法：transition: height 0.3s ease + height: auto，结果动画消失，只看到突兀展开。
实操建议：
- 用
max-height替代height：设一个足够大的固定值（如max-height: 500px），再配合overflow: hidden - 收起时设
max-height: 0，展开时设回500px（需确保内容高度不超过该值） - 加
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1)，比默认ease更顺滑
用 Tailwind 实现可复用的手风琴组件结构
Tailwind 本身不提供手风琴逻辑，但可以干净地封装样式。关键在控制类名的条件切换，而不是写内联 style。
立即学习“前端免费学习笔记（深入）”；
推荐 DOM 结构（含必要语义和可访问性）：
<div class="accordion">
<button class="accordion-trigger" aria-expanded="false" aria-controls="panel-1">
标题文本
</button>
<div id="panel-1" class="accordion-panel overflow-hidden max-h-0 transition-[max-height] duration-300 ease-cubic-bezier" aria-hidden="true">
<div class="p-4">面板内容</div>
</div>
</div>
实操要点：
- 用
transition-[max-height]启用 JIT 模式下的自定义属性过渡（Tailwind v3.2+） - 避免用
h-0/h-auto——它们无法过渡；坚持用max-h-0和max-h-[500px]（后者需在tailwind.config.js中扩展） - 为无障碍，必须同步切换
aria-expanded和aria-hidden，仅靠 CSS 不够
如何让动画响应 JavaScript 状态（React/Vanilla）
纯 CSS 无法监听“是否展开”，必须由 JS 控制类名。但别手动拼接字符串，容易出错。
React 示例（使用 useState）：
const [open, setOpen] = useState(false);
// ...
<div
className={\`accordion-panel overflow-hidden transition-[max-height] duration-300 \${open ? 'max-h-[500px]' : 'max-h-0'}\`}
aria-hidden={!open}
>
Vanilla JS 注意点：
- 不要用
element.classList.toggle('max-h-0', !open)——这会把两个类都加/删，破坏过渡起点 - 正确做法是显式设置：
panel.classList.replace('max-h-0', 'max-h-[500px]')或用className = open ? 'max-h-[500px]' : 'max-h-0' - 如果内容高度差异大，500px 可能不够或冗余；更健壮的做法是用
scrollHeight动态设max-height，但这已脱离纯 CSS 范畴
移动端点击穿透与滚动冲突怎么解
在 iOS Safari 上，手风琴快速开关常伴随页面意外滚动，或点击触发两次（尤其嵌套在 position: fixed 容器中）。
根本原因不是 Tailwind，而是事件冒泡和默认行为未抑制。
必须加的防护：
- 在触发按钮上加
onTouchStart={(e) => e.preventDefault()}（仅 iOS 需要，但加了无害） - 确保父容器没有
overflow-y: scroll且高度不足，否则手风琴展开可能触发父容器滚动条闪动 - 若用
transform: scaleY()做动画替代max-height，虽流畅但会导致子元素内文本模糊、焦点框错位，不推荐用于可访问场景
真正难调的不是过渡效果，而是当面板内容含表单、视频或第三方组件时，max-height 截断导致渲染异常——这时得退回到 JS 驱动的 height 内联样式 + ResizeObserver 动态测量。
