Ng-animate Not Working With Animate.css

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 att

Solution 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.