How to Use ngAnimate on ngRepeat-ed element? - css

Question

For the past few months, I've every once in a while gotten really excited about implemented ngAnimate in an application, and each time I am crushed with the fact that I cannot do it.
The funny thing is that the documentation is really straight forward, so I'm aware that there may be something abundantly obvious that is blindsiding me.
For example, when trying to paginate through an ngRepeated array of elements, I can't seem to get a fade animation to work. Check it out:
HTML
repeated elements
<div ng-repeat="image in images" ng-hide="image.hidden">
<canvas ng-mouseover="getCoordinates($event)" id="{{image.name}}" ng-hide="image.hidden" class="fade"></canvas>
</div>
paginator
<tr>
<td><input ng-model="coordinates.x"></td>
<td><input ng-model="coordinates.y"></td>
<td><i type="button" ng-click="page(left)" class="fa fa-arrow-left"></i></td>
<td><i type="button" ng-click="page(right)" class="fa fa-arrow-right"></i></td>
</tr>
CSS
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
I've also tried it with this:
.ng-enter {
transistion: 0.5s linear all;
opacity: 0;
};
.ng-enter-active {
transition: 0.5s linear all;
opacity: 1;
};
.ng-leave {
transition: 1s linear all;
opacity: 1;
};
.ng-leave-active {
transition: 0.5s linear all;
opacity: 0;
};
To keep this post more brief, I'll forgo the javascript stuff, but let it suffice that the pagination works.
Now, from my perspective, it seems like the issue is that Angular.js (1.4.7) is not adding the ng-enter, ect., classes upon hiding/showing. What could be the reason for this?
This post suggest I downgrade my Angular.js version, but I'm not going to do that. I believe animation should work on the latest version, I just have to figure out how.

Answer 1

I tend to use animate.css library since most basic animations are defined in there. Also, be sure to load the ngAnimate module as a dependent module in your angular app.
You can use the animate library classes in your apps style sheet to define what happens on ng-enter, ng-move, ng-leave, etc..
.animation.ng-enter, .ng-move {
-webkit-animation: fadeInRight 1s;
-moz-animation: fadeInRight 1s;
-ms-animation: fadeInRight 1s;
-o-animation: fadeInRight 1s;
animation: fadeInRight 1s;
}
.animation.ng-leave {
-webkit-animation: fadeOutRight 1s;
-moz-animation: fadeOutRight 1s;
-ms-animation: fadeOutRight 1s;
-o-animation: fadeOutRight 1s;
animation: fadeOutRight 1s;
}
Then on the element using ng-repeat you apply the css along with the .animate class.
<input type="text" ng-model="filter"/>
<div class="animation animated" ng-repeat="item in [1,2,3,4,5,6,7] | filter: filter">
<div class="box">
<h1>{{item}}</h1>
</div>
</div>
Here is a simple working example

Answer 2

I believe the class you're looking for is .foo.ng-enter and .foo.ng-enter-stagger for ngAnimate. These are the classes that ngAnimate requires you use.
You use .foo.ng-enter for your animation and .foo.ng-enter-stagger for its delay. E.g.
.foo.ng-enter {
-webkit-animation: fadeInLeft 1s;
animation: fadeInLeft 1s;
}
.foo.ng-enter-stagger {
-webkit-animation-delay:200ms;
animation-delay:200ms;
/* override to make sure it's not inherited from other styles */
-webkit-animation-duration:0;
animation-duration:0;
}
I always had trouble with this until I stumbled upon this site which explains both Animate CSS and ngAnimate in use with an Ionic Project.