css height change transition animation not shown when jQuery sets height to auto

Question

When I change a height using jQuery:

jQuery("#a").css("height", "200px");

The css transition works fine... but if I use:

jQuery("#a").css("height", "auto");

The height changes fine, but the transition doesn't happen. What is the reason for that?

css:

#a {
transition: height .5s ease-in-out;
}

Demo:

https://plnkr.co/edit/bNABZicUI7vplZGPNKuz?p=preview

jep and there is a nice thread https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Simon Franzen, Mar 20 '18 at 14:01
Oh, sorry... hadn't realized this is a classic issue... After reading the other thread... does anyone explain why this behavior exists? — Ted Scheckler, Mar 20 '18 at 16:27

score 0 · Answer 1 · answered Mar 20 '18 at 14:04

As I said in the comments, that's a good old classic... Here's the trick, adapt it to your code :

.element {
    border : blue dashed 5px;
    overflow : hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0,1,0,1);
}


.element:hover {
    max-height: 9999px;
    transition: max-height 0.5s cubic-bezier(1,0,1,0);
}

<div class="element">
  Blah <br>
 Blah <br>
 Blah <br>
 Blah <br>
 Blah <br>

</div>

css height change transition animation not shown when jQuery sets height to auto

1 Answers1