Menu
angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS
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>
383
The ng-repeat directive also adds a ng-move class value when the HTML element changes position. In addition, during the animation, the HTML element will have a set of class values, which will be removed when the animation has finished. Example: the ng-hide directive will add these class values: ng-animate.
keyframeslinkDefines a set of animation styles, associating each style with an optional offset value.
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)
22
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.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
