AngularJS 表格进入/离开动画

Question

我的 AngularJS 应用程序中有一个表格，我想在其中为进入/离开表格的行设置动画。 这是我在 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;
}

问题：

1. 动画期间单元格的宽度不一样
2. 只有在动画完成后才会应用新单元格的空间。我猜这是position:absolute 语句的问题。但没有它，就没有任何动静。

任何人都有一个漂亮的表格进入/离开动画方式（最好适用于 Material Design）

提前致谢！

Answer 1

据我所知，表格和表格行不适用于 CSS 和过渡...

您可以使用div 构建表格或将表格单元格内容包装在div 中。

我对您的CodePen example 进行了一些更改。它还不完美，但它可能会对你有所帮助。