corenominal

Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Using CSS Transitions on Auto Dimensions image/svg+xml

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.

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.

Leave a comment

Your email address will not be published. Required fields are marked *