Transition max-height with TailwindCSS arbitrary values-CodePudding

I'm trying to animate the max-height of a div from 0 to 100% using Tailwind's arbitrary values feature, but it's not working:

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" >Toggle text</button>
<p id="txt" >
  This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.
</p>

It just collapses and expands instantly, without any transition of the max-height.

The weird thing is that I do see the right properties being set in the developer tools:

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

Plus of course the max-height.

What else do I need to set or configure to make it transition?

CodePudding user response：

This is likely a CSS issue, not a TailwindCSS issue.

CSS wants to be fast, so there are several values you cannot animate to or from. When the parent doesn't have definite dimensions, one of these unanimatable values is 100%.

Unless you're willing to either set a definite height (e.g., 100px) or use some JavaScript, there's no way to do this animation as far as I know.

Since it looks like you're trying to make an accordion, I'd recommend checking out this article, which uses the WebAnimationsApi to achieve the same affect you're going for: https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

See more: how to animate width and height 100% using css3 animations?