AngularJS table enter-/leave animation

Question

I've got a table in my AngularJS app where I want to animate rows entering/leaving the table. Here's my progress on CodePen: http://codepen.io/MattFromGer/pen/zGdewM

HTML:

<tbody>
  <tr class="md-table-row" ng-repeat="row in tableRow">
    <td class="md-table-content" ng-repeat="content in tableContent"> {{content}} </td>
  </tr>
</tbody>

CSS:

.md-table-row.ng-leave.ng-leave-active,
/*.md-table-row.ng-move,*/
.md-table-row.ng-enter {
  -webkit-transition:all linear 1.5s;
  transition:all linear 1.5s;
  position:absolute;
  opacity:0;
  left: 20%;
}

.md-table-row.ng-leave,
/*.md-table-row.ng-move.ng-move-active,*/
.md-table-row.ng-enter.ng-enter-active {
  -webkit-transition:all linear 1.5s;
  transition:all linear 1.5s;
  position:absolute;
  opacity:1;
  left: 0;
}

The problems:

1. The width of the cells is not the same during the animation
2. The space for the new cell gets applied only after the animation is done. I guess that's a problem with the position:absolute statement. But without it, there's no motion at all.

Anyone got a beautiful way for a table enter-/leave animation (preferably suitable for Material Design)

Thanks in advance!

Answer 1

As far as I know tables and table rows don't work well with CSS and transitions...

You can build a table with div or wrap your table cell content in a div.

I made some changes on your CodePen example. It's not perfect yet, but it might help you a bit.