Animating height:auto;

We've all been there. You've got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You've set transition: height 0.2s ease-out. You've created a collapsed CSS class that applies height: 0. You try it out, and... the height doesn't transition. It snaps between the two sizes as if transition had never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as auto. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content. Below is a codepen to solve this issue. A pen by Tommy Hodgins

See the Pen Animated expand to height: auto; by Tommy Hodgins (@tomhodgins) on CodePen.

#Technique 1: max-height

If you web search this problem, the max-height approach will probably be mentioned in all of the first five to ten results. It's actually pretty unideal, but I thought it was worth including here for the sake of comparison. It works like this: CSS values can only be transitioned to and from fixed unit values. But imagine we have an element whose height is set to auto, but whose max-height is set to a fixed value; say, 1000px. We can't transition height, but we can transition max-height, since it has an explicit value. At any given moment, the actual height of the element will be the maximum of the height and the max-height. So as long as max-height's value is greater than what auto comes out to, we can just transition max-height and achieve a version of the desired effect.

See the Pen Smooth Collapsing div with max-height by Brandon (@brundolf) on CodePen.

There are two crucial downsides to this

One is obvious, and one is subtle. The obvious disadvantage is that we still have to hard-code a maximum height for the element, even if we don't have to hard-code the height itself. Depending on your situation, maybe you can guarantee that you won't need more height than that. But if not, it's a pretty big compromise. The second, less obvious downside, is that the transition length will not actually be what you specify unless the content height works out to be exactly the same as max-height. For example, say your content is 600px tall, and your max-height is transitioning from 0px to 1000px with a duration of 1 second. How long will it take the element to get to 600px? 0.6 seconds! The max-height will continue transitioning, but the real height will stop changing once it reaches the end of its content. This will be even more pronounced if your transition is using a nonlinear timing function. If the transition is fast at the beginning and slow at the end, your section will expand quickly and collapse slowly. Not ideal. Still, transitions are relatively subjective, so in cases where this technique is otherwise appropriate, it could be an acceptable tradeoff.

#Technique 2: transform: scaleY()

If you aren't familiar with the transform property, it allows you to apply GPU-driven transformations (translate, scale, rotate, etc.) to an element. It's important to note a couple of things about the nature of these transformations: Th

1. They operate on the element's visual representation as if it were simply an image, rather than a DOM element. This means, for example, that an element scaled up too far will look pixellated, since its DOM was originally rendered onto fewer pixels than it now spans.
2. They do not trigger reflows. Again, the transform doesn't know or care about the element's DOM structure, only about the "picture" the browser drew of it. This is both the reason this technique works and its biggest downside.

Implementation works like this: we set a transition for the element's transform property, then toggle between transform: scaleY(1) and transform: scaleY(0). These mean, respectively, "render this element at the same scale (on the y axis) that it starts out at" and "render this element at a scale of 0 (on the y axis)". Transitioning between these two states will neatly "squish" the element to and from its natural, content-based size. As a bonus, even the letters and/or images inside will visually "squish" themselves, rather than sliding behind the element's boundary. The downside? Since no reflow is triggered, the elements around this element will be completely unaffected. They will neither move nor resize to fill in the empty space.

See the Pen Smooth Collapsing div with scaleY() by Brandon (@brundolf) on CodePen.