一、声明
注意animate的版本要与Angular的一致。
<script src="jquery.1.9.1.min.js"></script>
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
二、页面
<body ng-app="myApp" ng-controller="myCtrl"> <div class="container"> <h3>Animation-js</h3> <form class="form-search"> <div class="input-append"> <input type="text" ng-model="search" placeholder="Search user" class="form-control" > </div> <ul class="example-animate-container"> <li class="animate-repeat" ng-repeat="user in users | filter:search"> <a href="#"> {{user}} </a> </li> </ul> </form> </div> </body>
三、Js
var app = angular.module('myApp',['ngAnimate']);
app.controller('myCtrl',['$scope',function($scope){
$scope.users = ['Fabio','Leonardo','Thomas','Gabriele','Fabrizio','John','Luis','Kate','Max'];
}]);
app.animation('.animate-repeat',function(){
return {
enter:function(element,done){
$(element).css({opacity:0});
jQuery(element).animate({
opacity: 1,height:40
},300,done);
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},leave:function(element,done){
jQuery(element).animate({
opacity:0,height:0
},done);
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},move:function(element,done){
//do not used
}
};
});
@H_57_301@四、注意事项
1、Angular的版本与Angular-animate的版本要一致，不然会报错；
2、一个App内不能声名相同名字的Controller；
3、上面例子只是ng-repeat的版本，其实还有其他版本；
4、ng-repeat只用到了Animate声明Js版本中的enter,leave和move三个方法；
