ng-animate multiple table rows do not animate

Question

I'm attempting to hilight when items appear in a table. There may be 2, 3, or more items that appear at the same time. However, ng-animate does not appear to handle this correctly.

In the following fiddle, you can see a working use case of table rows (along side an example with div elements). The div elements animate properly. The table row elements do not.

Demo Fiddle

HTML

<table class="animate-appear">
  <tr ng-repeat="item in repeatingItems">
    <td>{{item}}</td>
    <td>{{item}}</td>
  </tr>
</table>

CSS (simplified)

table.animate-appear tr td {
  padding: 5px 10px;
  transition: all 1s ease;
  opacity: 1;
}

table.animate-appear .ng-enter td,
table.animate-appear .ng-leave.ng-leave-active td,
table.animate-appear .ng-move td {
  opacity: 0;
  background-color: yellow;
}

table.animate-appear .ng-enter.ng-enter-active td,
table.animate-appear .ng-leave td,
table.animate-appear .ng-move.ng-move-active td {
  opacity: 1;
  background-color: white;
}

Notes:
1. The div elements appear to animate properly. That is included in the fiddle for a point of comparison.
2. The table rows cannot be changed to div elements.
3. A minor timeout (as little as 30ms in my testing) causes the subsequent rows to animate properly. This is not a viable solution to my issue, however. 4. I'm only concerned with the ng-enter animation. 5. I've tried applying the animation styles to the table row with no success.

Why does this happen? And more to the point, what can I do to cause all new elements in a table to animate properly?

Answer 1

The animation css for your table is causing a conflict because it is applied to both the row and the cell. If you alter the css so that the animation applies only to the row, it should animation correctly.

table.animate-appear tr {
  transition: all 1s ease;
  opacity: 1;
}

table.animate-appear td {
  padding: 5px 10px;
  opacity: 1;
}

table.animate-appear .ng-enter,
table.animate-appear .ng-move {
  opacity: 0;
  background-color: yellow;
}

table.animate-appear .ng-enter.ng-enter-active,
table.animate-appear .ng-leave,
table.animate-appear .ng-move.ng-move-active {
  opacity: 1;
  background-color: white;
}