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 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!
Answer
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.