CODEWITHSUNDEEP
angularjsanimation
James Bell
James Bell

Reputation: 938

Animate expanding table row

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?

Upvotes: 0

Views: 3184

Answers (1)

James Bell
James Bell

Reputation: 938

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.

Upvotes: 1

Related Questions