ng-repeat animation not working

2019-02-19 02:15发布

站内问答 / 后端开发
836 1 4

My animation with ng-repeat does not seem to work . Here is the plunkr

http://plnkr.co/edit/kYtzM9d0rzGmrniybz9c?p=preview

Any inputs.

1条回答
Root（大扎）
2楼-- · 2019-02-19 02:39

1. You have registered two modules:

<html ng-app="plunker">

And:

<body ng-app="testApp">

Remove ng-app from the html tag.

2. You need to load angular-animate.js

3. As you are moving the elements within the array, it's neither enter or leave you should use, but instead move: .ng-move {

4. You are using the ng-animate directive (ng-animate="'animate'") which is deprecated since 1.2. You are also passing it a class that does not exist.

This would work:

.ng-move {
  transition: 1.75s;
  opacity: 0;
}
.ng-move.ng-move-active {
  opacity: 1;
}

But I would recommend giving it a specific class to be able to specify which ng-repeat uses which animation:

.move-animation.ng-move {
  transition: 1.75s;
  opacity: 0;
}
.move-animation.ng-move.ng-move-active {
  opacity: 1;
}

And: 

<td class="move-animation" ng-repeat="cust in customers" ng-click="swap(this.$index)">

Demo: http://plnkr.co/edit/fiMORm5ZFLejV1aOUrbR?p=preview

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)