标签：
要在angular中加入动画必须引入angular.animate.js插件，然后就可以在module中引入ngAnimate模块。如：
var module1 = angular.module(‘myApp‘,[‘ngAnimate‘]);
指令对动画支持情况如下
Directive Supported Animations ngRepeat enter, leave and move ngView enter and leave ngInclude enter and leave ngSwitch enter and leave ngIf enter and leave ngClass add and remove ngShow & ngHide add and remove (the ng-hide class value) form add and remove (dirty, pristine, valid, invalid & all other validations) ngModel add and remove (dirty, pristine, valid, invalid & all other validations)
怎么用呢？举例：
ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程为：
创建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默认状态 默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素
给ng-repaet创建的元素都添加一个类名，--例如item
然后就可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式，加上css3的动画来显示出动画，如：
.item{ -webkit-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; } /*动画开始前*/ .item.ng-enter{ opacity:0; } /*动画过程*/ .item-ng-enter-active{ opacity:1; }
这样的效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger来实现.
/*不同时出现*/ .item.ng-enter-stagger { transition-delay:0.5s; transition-duration:0; }
如果这些依然不能满足，还可以使用js
m1.animation(‘.item‘,function(){ return { addClass : function(element,sClass,done){ //console.log(element); //console.log(sClass); //console.log(done); $(element).animate({width:0,height:0},1000,done); }, removeClass : function(element,sClass,done){ $(element).css({width:0,height:0}); $(element).animate({width:200,height:200},1000,done); } }; });
标签：
原文地址：http://www.cnblogs.com/toodeep/p/5015471.html
