My animation with ng-repeat does not seem to work . Here is the plunkr
http://plnkr.co/edit/kYtzM9d0rzGmrniybz9c?p=preview
Any inputs.
Add a comment |
1 Answer
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)"> 
1 Comment
user476566
Thanks for the explanation and pointing out the bugs , it makes it easier to understand and learn