How to use ng-animate in angular 1.2?

angularjs, javascript, ng-animate

Solution

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.

Problem

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 follow the instructions from the docs - http://docs.angularjs.org/api/ngAnimate • First include angular-animate.js in your HTML • Then load the module in your application by adding it as a dependent module It's quite late in my timezone and I probably miss something obvious. My guess would be - CSS file between 1.1.5 and 1.2.6 is not compatible? Cannot really tell... Anyway here is the code form upped plunker, I included some comments to emphasise that I followed instructions from docs: ``` <!doctype html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>Top Animation</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="http://code.angularjs.org/1.2.6/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script> <!-- ^^^ load animate --> </head> <script> var app = angular.module('app', ['ngAnimate']); // <-- dependent module app.controller('Ctrl', function($scope) { $scope.names = ['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi']; }); </script> <body ng-controller="Ctrl"> <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;"> <form class="form-search"> <div class="input-append"> <input type="text" ng-model="search" class="search-query" style="width: 80px"> <button type="submit" class="btn">Search</button> </div> <ul class="nav nav-pills nav-stacked"> <li ng-animate="'animate'" ng-repeat="name in names | filter:search"> <a href="#"> {{name}} </a> </li> </ul> </form> </div> </body> </html> ``` Many thanks for help!

Original source