ng animate

要在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);
        }
    };
});