使用 TailwindCSS 任意值转换 max-height

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

这对我有用：

tailwind.config.js

theme: {
  extend: {
    transitionProperty: {
      'max-height': 'max-height'
    }
  }
}

还有我的课

<!-- Hidden -->
<div class="overflow-hidden transition-max-height max-h-0"></div>

<!-- Visible -->
<div class="overflow-hidden transition-max-height max-h-[32]"></div>

Answer 2

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

CSS 希望速度快，因此有几个值无法通过动画处理。当父级没有明确的尺寸时，这些不可设置动画的值之一是100%。

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

由于看起来您正在尝试制作手风琴，因此我建议您查看这篇文章，其中使用 WebAnimationsApi 来实现您想要的相同效果： https: //css-tricks.com/how-to -使用 waapi/ 对细节元素进行动画制作

查看更多：如何使用 css3 动画将宽度和高度设置为 100%？