Animating Max-Height with CSS Transitions

Animating max-height with CSS transitions

In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)

Transition max-height with TailwindCSS arbitrary values

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?

max-height transition not working when max-height is reduced

You can do this without setting a height, you jsut have to set a min-height, see below example

Note - in the normal .c state, you could set min-height to 1px if you want but it will speed up the animation because you are going from 300 to 1

.a {  height: 300px;  display: flex;  flex: 1 1 auto;  flex-direction: column;  overflow-y: auto;}
.b {  background: gray;  display: flex;  flex-direction: column;  height: 100%;  overflow-y: auto;  flex: 1 1 auto;}
.c {  max-height: 200px;  min-height: 100px;  background: slategray;  color: white;  overflow-y: hidden;  transition: 1s;}
.c:hover {  max-height: 300px;  min-height: 300px;}
.c-parent {  flex: 0 0 auto;}

<div class="a">  <div class="b">    Background DIV  </div>  <div class="c-parent">    <div class="c">      Hover over me<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>    </div>  </div></div>

How can I transition height: 0; to height: auto; using CSS?

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {    max-height: 0;    transition: max-height 0.15s ease-out;    overflow: hidden;    background: #d5d5d5;}
#menu:hover #list {    max-height: 500px;    transition: max-height 0.25s ease-in;}

<div id="menu">    <a>hover me</a>    <ul id="list">        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>    </ul></div>

No CSS transition for 'height: fit-content'

As Mishel stated another solution is to use max-height. Here is a working example of that solution.

The key is to approximate your max-height when it is fully expanded, then the transitions will be smooth.

Hope this helps.

https://www.w3schools.com/css/css3_transitions.asp

document.querySelector('button')  .addEventListener(    'click',    () => document.querySelectorAll('div')      .forEach(div => div.classList.toggle('closed')));

div {  background-color: lightblue;  border: 1px solid black;  overflow-y: hidden; max-height: 75px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(1, 1, 1, 1);}div.closed {   max-height: 0;}

<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1><div class="div1">some text<br />even more text<br />so much text</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1><div class="div2">some text<br />even more text<br />so much text</div>

css transition max-height back to 0 not working

Remove height:10px; from your code. it ll makes height 10px in high priority and makes overflow-hidden. thats why the animation is not working. for more details about max-height property follow this link

.animate{  font-size:20px;  max-height:10px;  width: 100px;  overflow:hidden;  -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -ms-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out;  transition: all 0.5s ease-in-out;}.animate:hover{  height:auto;  max-height:1000px;}

<div class="animate">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory  ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>

Animate height and max-height on different elements cause a queue of transitions

I would build the styling again due to positioning problems, but if you want a fast patch for this issue change maxHeight: isHeightFull ? 0 : 500 on line 103 for maxHeight: isHeightFull ? 0 : 50

To improve the styling try adding borders to your two most important containers and then figure out how to build it in such a way that they don't superimpose.

CSS transition not working with max-height: fit-content

yes fit-content and max-content are not animate your content. you have to provide some numeric value to the max-height for animate. it consider the height required to your content so you have to provide the value of max-height greater then your content height.

Thank you.

how to make my transitions for max-height work synchronously?

interestingly, you've stumbled on a deceptively difficult problem in pure CSS.
The truth is, your paragraphs are already behaving as you want them to, the problem is that you've specified a large max height relative to the actual content of the p, it gives the impression that they are executed one after the other, but that's just because the time it takes is relatively (compared to actual height of p with overflow: hidden) long to grow/shrink max-height to 500px. It's as if you have an invisible box growing to 500px.
This should be easily solvable by changing your max-height to auto, but unfortunately you cannot animate height auto in pure CSS transitions. your options are:

a) choose a different hardcoded max-height which is closer to the actual content size.

b) use transform scale(Y)

c) use pure JS: for example slideUp and slideDown

var Headers = $('.header') 
var dropDownParagraphs = $('.dropDown p') 

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
    // theP.addClass("active");
  // dropDownParagraphs.not(theP).removeClass("active");
  dropDownParagraphs.not(theP).slideUp(200);
  theP.slideDown(200);

});

check this codepen for implementation of c)
https://codepen.io/bakuthe3rd/pen/abvzVJz

Animating Max-Height with CSS Transitions