ng-animate not working with animate.css

Question

I have followed this tutorial trying to implement animation in my app. But for some reason I cant do it. Here is the planker I have made.

Here is how I am adding the ng-animate attribute:

<li ng-repeat="item in items" class="{enter:'animated bounceIn',leave:'animated bounceOut'}">{{item}}</li>

Note: I am using animate.css.

Can someone point out what am I doing wrong?

Answer 1

Your animations aren't working because Angular applies some classes to the elements for the animations such as: ng-enter, ng-leave, etc. So, we just need to wire these up with the animations:

Here is an example:

<style>
 li.ng-enter {
-webkit-animation: bounceIn 0.5s;
animation: bounceIn 0.5s;
 }
 li.ng-leave {
   -webkit-animation: bounceOut 0.5s;
animation: bounceOut 0.5s;

 }
 </style>

In your html somewhere:

<li ng-repeat="item in items"  >{{item}}</li>

demo: http://plnkr.co/edit/c8uvhQXtXgdfsEHRo9P6?p=preview

The angular documentation lists the classes it uses.