Using CSS Transitions on Auto Dimensions
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 acollapsed
CSS class that appliesheight: 0
. You try it out, and… the height doesn’t transition. It snaps between the two sizes as iftransition
had never been set.
This helpful post came too late for me, I was there yesterday and I wasted a good few minutes trying to get my head around this frustrating feature. Just think, I could have used that wasted time to do something proper useful, like making another cup of coffee.