Css AngularJS表格输入/离开动画

我在AngularJS应用程序中有一个表格，我想在其中设置进出表格的行的动画。 以下是我在CodePen上的进展：

HTML:

问题是：

在动画期间，单元的宽度不同

新单元的空间仅在动画完成后应用。我想这是

position:absolute

语句的一个问题。但是没有它，就没有运动

任何人都有一个漂亮的表格进入/离开动画（最好适合材质设计）

---

提前谢谢

据我所知，表格和表格行不能很好地处理CSS和转换

您可以使用

div

构建表，或将表单元格内容包装在

div

中

---

我对你的电脑做了一些修改。它还不完美，但可能会对您有所帮助。

谢谢Michael，不像您所说的那么完美，但要好得多！

<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>

.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;
}