CODEWITHSUNDEEP
csscss-transitionstailwind-css
Jeroen
Jeroen

Reputation: 63830

Transition max-height with TailwindCSS arbitrary values

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" 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>

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?

Upvotes: 5

Views: 12481

Answers (3)

Mohamad Ojail
Mohamad Ojail

Reputation: 71

In this case there is nothing wrong with Tailwind CSS, it is actually a fundemental CSS built-in design.

your CSS will not transition between fixed values (max-height-[*px]) and relative values (max-height-full)

the trick is quite easy just set the transition value of the max-height to a big value closer to you desired value.

say that you expect your max-height to be around 200px you can easily set it to 300px or even a 1000px does not matter. check out the snippet:

document.getElementById("toggle").addEventListener("click", () => {
  document.getElementById("txt").classList.toggle("max-h-[300px]");
  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-0 transition-[max-height] duration-500 ease-in-out">
  This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.
</p>

Upvotes: 2

Lionep
Lionep

Reputation: 446

This is working for me :

tailwind.config.js

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

And my classes

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

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

Upvotes: 6

Nick
Nick

Reputation: 6422

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?

Upvotes: 4

Related Questions