ng-repeat 动画
根据列表元素的插入与移除，触发相应的代码添加动画
<!doctype html> <html lang="en" 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>