使用 TailwindCSS 任意值的过渡最大高度

Question

我正在尝试使用 Tailwind 的任意值功能将 div 的最大高度设置为从 0% 到 100% 的动画，但它不起作用：

document.getElementById("toggle").addEventListener("click", () => {
  document.getElementById("txt").classList.toggle("max-h-full");
  document.getElementById("txt").classList.toggle("max-h-0");
});

<script src="https://cdn.tailwindcss.com"></script>
<button id="toggle" class="m-3 p-2 border hover:bg-slate-300">Toggle text</button>
<p id="txt" class="m-3 border overflow-hidden max-h-full transition-[max-height] ease-out">
  This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.
</p>

它只是瞬间折叠和展开，没有任何 max-height 的过渡。

奇怪的是，我确实看到在开发人员工具中设置了正确的属性：

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-property: max-height;
transition-duration: 150ms;

当然还有 max-height.

我还需要设置或配置什么才能使其转换？

Answer 1

这可能是一个 CSS 问题，而不是 TailwindCSS 问题。

CSS 想要快点，所以有几个值你不能设置动画。当父级没有明确的尺寸时，这些不可动画的值之一是 100%.

除非您愿意设置明确的高度（例如 100px）或使用一些 JavaScript，否则据我所知无法制作此动画。

因为看起来你正在尝试制作手风琴，我建议你查看这篇文章，它使用 WebAnimationsApi 来实现你想要的相同效果：https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

查看更多：

使用 TailwindCSS 任意值的过渡最大高度

Transition max-height with TailwindCSS arbitrary values

css

css-transitions

tailwind-css