Angular动画，ng-repeat
ng-repeat 动画
根据列表元素的插入与移除，触发相应的代码添加动画
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<style>
li
{
height:45px;
}
.even
{
background:red;
}
.odd
{
background:green;
}
</style>
</head>
<body>
<div ng-controller="myController">
<!--
根据 model 输入的值过滤数组元素
ng-repeat="v in arr|filter:name track by $index"
-->
<input type="text" ng-model="name"/>
<ul>
<li
ng-repeat="v in arr|filter:name track by $index "
class="li"
ng-class-even="'even'"
ng-class-odd="'odd'"
>{{v}}
</li>
</ul>
</div>
<script>
angular.module("myApp",["ngAnimate"])
.controller("myController",function($scope){
$scope.arr = [
"sgssb","afewae","yjgyj","ioil","fefe","jf,jtuy,","seven","eight","nine","ten",
"a","b","c","c","d","f","s","a","5fsg","sgsfgsg"
];
})
//使用动画需要一个类名
.animation(".li",function(){
return{
//一项被插入到列表时触发
enter:function(element,done){
//定义动画
$(element).animate({"height":"45px","opacity":"1"},300,function(){
done();
})
},
//一项从列表中被移除时触发
leave:function(element,done){
//定义动画
$(element).animate({"height":"0","opacity":"0"},300,function(){
done();
})
}
}
})
</script>
</body>
</html>