AngularJS table enter-/leave 动画

Question

我的 AngularJS 应用程序中有一个 table，我想在其中设置 entering/leaving 和 table 行的动画。这是我在 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;
}

问题：

动画中单元格的宽度不一样
只有在动画完成后才会应用新单元格的 space。我想这是 position:absolute 语句的问题。但是没有它，根本就没有运动。

任何人都有一个漂亮的 table enter-/leave 动画方法（最好是 suitable 用于 Material 设计）

提前致谢！

Answer 1

据我所知，tables 和 table 行在 CSS 和转换中效果不佳...

您可以使用 div 构建 table 或将 table 单元格内容包装在 div.

中

我对你的 CodePen example 做了一些修改。虽然还不完善，但可能会对你有所帮助。

AngularJS table enter-/leave 动画

AngularJS table enter-/leave animation

css

animation

css-animations

angularjs

ng-animate