How To Use Ng-animate In Angular 1.2?

Base angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS Upped angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - FAIL I think I did fol

Solution 1:

Here is a working version of your plunker... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview

In Angular 1.2+, you don't need to declare the ng-animate directive anymore. Animations can be added with css alone. So for your example, you can remove the ng-animate directive and give the element a css class, so change...

<li ng-animate="'animate'" ng-repeat="name in names | filter:search">

to...

<li class="animate" ng-repeat="name in names | filter:search">

and then update your css to ...

.animate.ng-enter, 
.animate.ng-leave
{ 
...

.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
...

.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
...

Angular will simply add the ng-enter, ng-hide, ng-leave.. etc. classes to the element and remove them appropriately during the animation lifecycle, which will trigger the css animations. There is a list of which directives support which animation classes in the docs under 'Usage'. In this example, we are animating ng-repeat, so the ng-enter, ng-leave and ng-move classes will be added to our element at the appropriate time and we can attach animations to them with css.

Solution 2:

I've found this demo that does a great job: http://jsbin.com/usaruce/3/edit

It uses following syntax:

.todo-item {
  -webkit-transition: color 0.6s, background-color 0.3s;
  -moz-transition: color 0.6s, background-color 0.3s;
  -ms-transition: color 0.6s, background-color 0.3s;
  transition: color 0.6s, background-color 0.3s;
}
.todo-item.ng-enter {
  -webkit-animation: fadeInLeft 1s;
  -moz-animation: fadeInLeft 1s;
  -ms-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}
.todo-item.ng-leave {
  -webkit-animation: bounceOut 1s;
  -moz-animation: bounceOut 1s;
  -ms-animation: bounceOut 1s;
  animation: bounceOut 1s;
}

It also takes advantage of animate.css(fadeInLeft, bounceOut)