I use CSS transitions a lot. Today I came across a problem that I’ve managed to avoid for a while: animating the height of elements to
Let’s say we want to change the height of an element when hovering over it (or over a containing element). If we define a specific height for the element for each state, we can easily use CSS transitions like in this example.
But we don’t always know how high the element is when it’s hovered over, especially when it contains an unknown amount text. And if the height of an element at the end of the transition is set to
auto, it doesn’t work.
There is a workaround for this, but it’s a bit hacky admittedly: instead of using
transition-property we can use
max-height to (almost) accomplish what we want. We just have to set it to an unlikely high value and it will work as expected, like in this example. There’s a downside to this: if you set
max-height too high, the transition will take longer.
That’s what I learnt today.