我的 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;
}
问题:
- 动画中单元格的宽度不一样
- 只有在动画完成后才会应用新单元格的空间。我猜这是
position:absolute
语句的问题。但没有它,根本就没有运动。
任何人都有一个漂亮的表格进入/离开动画的方法(最好适合 Material Design)
提前致谢!
最佳答案
据我所知,表格和表格行不能很好地与 CSS 和过渡配合使用...
您可以使用 div
构建表格或将表格单元格内容包装在 div
中。
我对你的 CodePen example 做了一些修改.它还不完美,但它可能会对您有所帮助。
关于css - AngularJS 表格进入/离开动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30890515/