title: Animate expanding table row
body: <p>I have a calendar represented with a table.  The content of each day may be too much to display so the height is fixed and the overflow hidden.  However when the user hovers over the row I have the entire row expand.  This is working perfectly.  What I need to ease the <em>transition</em> of the divs in the row from height:60px to height:auto, perhaps slow it to about 500ms.</p>
  
  <p>I'm using AngularJS 1.2, I have ngAnimate loaded as well as animate.css (used elsewhere in the app).</p>
  
  <p>Each day in the calendar is a div within a td tag.</p>
  
  <pre><code>div.cal_container
  {
    height:60px; 
    overflow:hidden;
  }
  </code></pre>
  
  <p>And when I hover over the row this is what I use to expand the whole row:</p>
  
  <pre><code>table.cal tr:hover &gt; td &gt; div
  {
    height:auto;
  }
  </code></pre>
  
  <p>How do I animate the height transition?</p>