Animate expanding table row - angularjs

Question

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 transition of the divs in the row from height:60px to height:auto, perhaps slow it to about 500ms.
I'm using AngularJS 1.2, I have ngAnimate loaded as well as animate.css (used elsewhere in the app).
Each day in the calendar is a div within a td tag.
div.cal_container
{
height:60px;
overflow:hidden;
}
And when I hover over the row this is what I use to expand the whole row:
table.cal tr:hover > td > div
{
height:auto;
}
How do I animate the height transition?

Answer 1

The problem seems to be that transitions don't like height:auto. I found this solution/workaround and it's giving me 95% of what I wanted:
Add max height to the div:
div.cal_container
{
height:60px;
overflow:hidden;
max-height: 60px;
}
Add the transition to the max-height in the row selector CSS:
table.cal tr:hover > td > div
{
max-height: 1000px;
transition: max-height 0.75s ease-in;
height:auto;
}
The last bit I'd like to get is to ease the transition back to height:60px when they stop hovering but this is less important.