怎样在Tailwind CSS中编写响应式CSS折叠面板动画-css教程-PHP中文网

因为 height: auto 无法被 transition 动画化，浏览器无法计算具体像素值，导致跳变；常用解法是用 max-height 配合足够大的固定值，或用 transform: scaley() + overflow: hidden 实现流畅动画。

怎样在tailwind css中编写响应式css折叠面板动画

折叠面板动画为什么不能直接用 `transition` 控制 `height`？

因为 height: auto 无法被 CSS transition 动画化——浏览器不知道“auto”对应的具体像素值，过渡会立即跳变。你看到的“没动画”或“闪一下”，基本都卡在这儿。

常见错误写法：transition: height 0.3s ease 配合 height: auto，结果只有展开/收起瞬间生效，中间无过渡。

可行解法是绕过 height，改用 max-height + 固定上限值，或用 transform: scaleY() + overflow: hidden。

用 `max-height` 实现可预测的过渡动画

这是最常用、兼容性好、语义清晰的方式。关键在于设一个足够大但不过度冗余的 max-height 上限值（比如 max-height: 40rem），让内容能完全展开，又不至于因值过大导致动画拖沓。

收起状态：设 max-height: 0 + overflow: hidden
展开状态：设 max-height: 40rem（约 640px，覆盖多数面板内容）
必须加 transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1)，推荐用 Tailwind 的 motion-reduce:transition-none 适配用户偏好
注意：不要用 h-0 / h-full 这类 utility，它们操作的是 height，不是 max-height

示例类名组合：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="max-h-0 overflow-hidden transition-[max-height] duration-250 ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none [&.open]:max-h-[40rem]">
  <div class="p-4">面板内容</div>
</div>

用 `scaleY` 实现更顺滑、性能更高的动画

适合内容高度变化不大、或对动画帧率敏感的场景（比如移动端）。transform 触发 GPU 加速，比 max-height 更流畅，且不依赖预估高度值。

收起状态：设 transform: scaleY(0) + transform-origin: top + overflow: hidden
展开状态：设 transform: scaleY(1)
必须加 origin-top（Tailwind v3.3+）或自定义 transform-origin: top，否则缩放中心在中点，会“上下同时挤”
注意：scaleY(0) 会让子元素不可交互（包括 focus、点击），需配合 pointer-events-none 收起时禁用，展开后再恢复

示例（需配合 JS 切换 open 类）：

<div class="origin-top overflow-hidden transition-transform duration-250 ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none [&.open]:scale-y-100 [&:not(.open)]:scale-y-0 [&:not(.open)]:pointer-events-none">
  <div class="p-4">面板内容</div>
</div>

响应式断点下如何控制展开/收起行为？

Tailwind 的响应式前缀（如 md:max-h-0）不能直接用于切换动画状态——它只会改变“初始值”，无法响应 JS 控制的开闭逻辑。真正要做响应式折叠，得靠 JS 判断视口宽度后动态加类，或用媒体查询 + 自定义属性配合 CSS。

推荐做法：在 JS 中监听 resize，当宽度 时强制启用折叠逻辑（比如移动端默认收起，桌面端默认展开）
避免写 sm:max-h-0 md:max-h-[40rem] 这类组合——它会让小屏也“试图动画到 0”，但内容其实还在渲染，造成布局错乱
如果要用纯 CSS 响应式开关，可结合 @layer utilities 定义 max-h-\[40rem\]-sm 等类，再配合 JS 按断点切换，但维护成本高

真正省心的做法是：JS 控制开闭状态，CSS 只负责动画本身；断点逻辑放在 JS 层判断，而不是塞进 Tailwind 类名里。

最易被忽略的一点：动画结束后的 DOM 状态。用 max-height 时，即使收起，元素仍占据文档流（只是看不见）；用 scaleY 时，虽然视觉隐藏，但 getBoundingClientRect() 仍返回非零值。如果后续有滚动定位、无障碍读取或兄弟元素间距计算，得额外处理 hidden 或 aria-hidden 属性。