title: Animating max-height with CSS transitions
body: <p>I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames).</p>
  
  <p>I'm giving one class <code>max-height: 4em; overflow: hidden;</code> </p>
  
  <p>and the other <code>max-height: 255em;</code> (I also tried the value <code>none</code>, which didn't animate at all)</p>
  
  <p>this to animate: <code>transition: max-height 0.50s ease-in-out;</code></p>
  
  <p>I used CSS transitions to switch between them, but the browser seems to be animating all those extra <code>em</code>'s, so it creates a delay in the collapse effect. </p>
  
  <p>Is there a way of doing it (in the same spirit - with css classnames) that doesn't have that side-effect (I can put a lower pixel count, but that obviously has drawbacks, since it might cut off legit text - that's the reason for the big value, so it doesn't cut off legit long text, only ridiculously long ones)</p>
  
  <p>See the jsFiddle - <a href="http://jsfiddle.net/wCzHV/1/">http://jsfiddle.net/wCzHV/1/</a> (click on the text container)</p>