Paul Hummer: CSS Transitions and Percentages

I just had a rather odd experience using CSS transitions to change a div from height of zero to its full height. The experience was "It doesn't work." The div element was just popping out, which is jarring, and exactly what I didn't want. After futzing around with it, I found that CSS transitions don't support using percentages in the transition.

I was using YUI 3 to handle the transition, so this is how I had it laid out:

<div id="test">
  Lorem ipsum you get the idea
</div>
<style>
  #test {
    height: 0;
    overflow: hidden;
  }
</style>
<script>
  YUI().use('node', 'transition', function(Y) {
    Y.one('#test').transition({
      duration: 1,
      height: '100%'
    });
  }
</script>

Since the percentage didn't want to work, I was at a loss. I didn't want to use hard pixel or line value, because I'd have to do some nasty things to figure out how large it would need to be in order to transition properly. That would be ugly, and a total pain the butt to maintain.

That's when I came up with a better hack... I used the max-height CSS property instead of the height property. My code then looked like this:

<div id="test">
  Lorem ipsum you get the idea
</div>
<style>
  #test {
    max-height: 0;
    overflow: hidden;
  }
</style>
<script>
  YUI().use('node', 'transition', function(Y) {
    Y.one('#test').transition({
      duration: 1,
      'max-height': '9999px'
    });
  }
</script>

The browser is smart enough to figure out how large the height needs to be, and just makes sure it's not larger than 9999px (which it had better not be, or my database is probably crying...) It's an odd hack, but one that works and uses native CSS transitions in modern browsers (and for this project, I don't care about older browsers).

Update: Of course, as soon as I say "it shouldn't get bigger than X," it does. I guess it's prudent to set that max-height to an astronomically huge number.