手风琴 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- duration-300 : aria-hidden="{!open}">
<p>Vanilla JS 注意点：</p>
<ul>
<li>不要用 <code>element.classList.toggle('max-h-0', !open)</code> ——这会把两个类都加/删，破坏过渡起点</li>
<li>正确做法是显式设置：<code>panel.classList.replace('max-h-0', 'max-h-[500px]')</code> 或用 <code>className = open ? 'max-h-[500px]' : 'max-h-0'</code>
</li>
<li>如果内容高度差异大，500px 可能不够或冗余；更健壮的做法是用 <code>scrollHeight</code> 动态设 <code>max-height</code>，但这已脱离纯 CSS 范畴</li>
</ul>
<h3>移动端点击穿透与滚动冲突怎么解</h3>
<p>在 iOS Safari 上，手风琴快速开关常伴随页面意外滚动，或点击触发两次（尤其嵌套在 <code>position: fixed</code> 容器中）。</p>
<p>根本原因不是 Tailwind，而是事件冒泡和默认行为未抑制。</p>
<p>必须加的防护：</p>
<ul>
<li>在触发按钮上加 <code>onTouchStart={(e) => e.preventDefault()}</code>（仅 iOS 需要，但加了无害）</li>
<li>确保父容器没有 <code>overflow-y: scroll</code> 且高度不足，否则手风琴展开可能触发父容器滚动条闪动</li>
<li>若用 <code>transform: scaleY()</code> 做动画替代 <code>max-height</code>，虽流畅但会导致子元素内文本模糊、焦点框错位，不推荐用于可访问场景</li>
</ul>
<p>真正难调的不是过渡效果，而是当面板内容含表单、视频或第三方组件时，<code>max-height</code> 截断导致渲染异常——这时得退回到 JS 驱动的 <code>height</code> 内联样式 + <code>ResizeObserver</code> 动态测量。</p>
</div>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
