Transitioning Max Height
Over at Happy Cog, we recently worked with MTV on their second Online Music Awards event. The project consisted of both a live streaming event as well as a supporting web site where users could come and vote on nominees. As a site that was designed to be exciting to use, we also wanted to make sure the experience was easy to use, while including some “surprise and delight” factors. The Vote page features an adaptive grid with hover states that were planned to reveal additional information about the categories.
The hidden information is not vital to be able to interact with the links, so we didn’t want to cover the imagery with it. We also didn’t want to exclude it, because some of us who have been watching MTV since “Video Killed the Radio Star” might need some additional context to know what the hip kids are voting on these days.
Talking it over with the design team, we figured we wanted the additional text to slide up on mouse over, so we decided to take advantage of CSS transitions to do so. I figured, no problem! We’ll toss a few different block elements within a link, since HTML5 lets us do that, and then set the height on the hidden text to 0, and then height auto that jawn on hover! Right? Not so much.
As you can see, there is no transition. Just a straight reveal. Bummer. So, I then tried animating to a height of 250px. And that works!
Unfortunately, I didn’t know the heights of all the descriptions. So that wouldn’t fly. Life’s looking up though, when I thought, how bout we try max-height instead.
So we remove the height attributes completely and set max-height to 0 initially, and then max-height to fit within the fixed dimension size of the box. As you can see, we’re in business.
For browsers that don’t support this, you can fallback to a straight reveal or rely on the primary link text to describe the link destination. CSS hover effects have gotten to be a boatload of fun.
December, 14th 2011
Comments
This is a swell technique =)
I do quite wish we could animate to height: auto though. The problem with the “max-height hack” is that you can’t control timing as well as you might like. Let’s say instead of a max of 250px you wanted to be able to expand to ANY height, So you made the max 9999px and the transition timing 2s. Now an area with a 250px natural height will open almost instantly while an area with a very large height may seem to open sluggishly. (crude drawing). But if you can limit it to a reasonable maximum as you have here, it’s pretty solid.
Interestingly, even fancy JavaScript libraries don’t have a baked in solution to fix this. But Darcy Clarke has a good fixer for jQuery: http://darcyclarke.me/development/fix-jquerys-animate-to-allow-auto-values/
Posted at 01:53 PM on December 14, 2011
Awesome. Love the effect the simplicity of execution too. Thanks for the article.
Posted at 01:55 PM on December 14, 2011
Chris, excellent point on the height limitations! The effect definitely has its limits and would be lame-inducing if it was a larger area as your very fine drawing illustrates!
Also thanks for the link to Darcy’s article!
Hamish, glad you enjoyed!
Posted at 02:05 PM on December 14, 2011
Nifty! (It’d be worth having the transition happen on :focus, too, for your friendly neighborhood keyboard users, et al. :)
Posted at 03:00 PM on December 14, 2011
I just utilized this when developing a slide-down menu for mobile. However, CSS3 doesn’t let you transition to height: auto; so I came up with this bit of jQuery.
http://jsfiddle.net/jamesacklin/W9hHp/
Essentially, if the user doesn’t have JavaScript, they get the whole menu as a block, which is totally fine by progressive enhancement standards. But if they do, it grabs the height of the un-collapsed menu, inserts a toggle button, collapses the menu, and does the same max-height: 0; trick as posted. Then, the toggle button adds a line of CSS and the transitions handle the rest.
Thanks for the jumping-off point!
Posted at 09:57 AM on January 09, 2012
Post a Comment