How can I animate a table row with a single column that spans multiple columns?

Question

How can I animate a table row with a single column that spans multiple columns?

I'm using Angular's ngAnimate to apply CSS animations to a table. When a row on the table is clicked I want the description to animate open. The description is a second table row with a single td that has a colspan="7". However, during the animation it only animates into the first column of the table. When the animation is complete it then spreads out to take up the full width. Below is an animated gif showing the behavior.

Any ideas for how to fix this? I've tried tons of different things, including keeping the tr and td visible but with no content, then animating an element inside the td instead. However, when I do that the animation doesn't happen at all; the row just pops open and closed instantly as though there no animation at all.

Here is the animation CSS being applied to the table row.

.animate-slide-down.ng-hide-add,
.animate-slide-down.ng-hide-remove.ng-hide-remove-active {
  transition: 1s ease-out all;
  transform: scale(1);
  transform-origin: right;
  line-height: 1.42857;
  display: block !important;
}

.animate-slide-down.ng-hide-remove,
.animate-slide-down.ng-hide-add.ng-hide-add-active {
  transition: 1s ease-out all;
  transform: scale(0);
  transform-origin: left;
  line-height: 0;
  display: block !important;
}

Any help is greatly appreciated.

javascript
html
angularjs
css3
css-animations

Answer 1

Nevermind. I figured it out. It has to do with the display CSS property. Angular's ngShow directive applies display: none to the element when it hides it. This property would make the collapse animation not work at all. To get around that I applied display: block !important to the animation selectors (I've done this many times in the past so I didn't think twice about it). Table rows are not displayed with display: block, they need to be set to display: table-row !important.

Once I changed my animation rules to this:

.animate-slide-down.ng-hide-add,
.animate-slide-down.ng-hide-remove.ng-hide-remove-active {
  transition: 1s ease-out all;
  transform: scale(1);
  transform-origin: right;
  line-height: 1.42857;
  display: table-row !important;
}

.animate-slide-down.ng-hide-remove,
.animate-slide-down.ng-hide-add.ng-hide-add-active {
  transition: 1s ease-out all;
  transform: scale(0);
  transform-origin: left;
  line-height: 0;
  display: table-row !important;
}

That solved the issue :)