A common desire in web development is animating an expandable element height from a value of 0 to auto (accordion, dropdown, etc.). I.e. We want text to be completely collapsed until a user hovers over something at which point the text expands to reveal itself at its natural length. The text should flow correctly for the container and screen size without anything getting cutoff.
So, here's the scoop according to the tech gurus over at Mozilla Developer Network: 'auto' values got left out from the CSS transitions spec. Now, you might wonder, "Why on earth would they do that?" Truth is, a handful of folks have been scratching their heads over the same thing.
Here's the thing though - it's not without reason. You see, there's this nifty (yet quite power-hungry) process the browser does called 'reflow'. Basically, it's the browser’s way of figuring out the sizes and positions of all elements. It takes into account their content, and how they all interact with each other.
Now, let's say you want an element to transition to a height of 'auto'. Our dear browser would need to pause and perform a reflow at every single stage of the animation, just to determine how the rest of the elements should adjust. That's quite the computational hiccup!
Moreover, the problem gets bigger because the browser doesn’t know the starting and ending values until the transition actually kicks off. This throws in a curveball into the already complex math happening behind the scenes, and could bog down performance in a way that might slip right under a developer's radar.
So, all things considered, it does make a certain amount of sense that 'auto' values were left out in the cold when it came to CSS transitions.
There have been a number of workarounds to solve the issue, but all of them have a drawback we should highlight. I won't detail them here beyond a mention:
On with the show.
Here's the CSS that doesn't work:
Now let's use grid-template-rows and fix that!
This technique is much tidier, requiring only two DOM nodes and causing the page content below to move smoothly. Just bear in mind, you can't add padding to the inner element. If padding is needed, you'll need an additional element inside the collapsed one to apply it to.