angular的动画ngAnimate模块

ngAnimate模块和ngRoute一样，不属于核心模块，都是需要script引入，然后在模块内依赖注入

那ngAnimate做了什么？

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

支持的指令：

指令支持动画ngRepeatenter, leave and movengViewenter and leavengIncludeenter and leavengSwitchenter and leavengIfenter and leavengClassadd and removengShow & ngHideadd and remove (the ng-hide class value)formadd and remove (dirty, pristine, valid, invalid & all other validations)ngModeladd and remove (dirty, pristine, valid, invalid & all other validations)

那么，怎么使用呢? 本文拿ng-repeat这个指令来做个介绍，其他的一些指令使用方式几乎相同，可类推。

ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程为：

创建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默认状态默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如： 
ng-hide 指令会添加一下类：
ng-animate ng-hide-animate ng-hide-add (如果元素将被隐藏) ng-hide-remove (如果元素将显示) ng-hide-add-active (如果元素将隐藏) ng-hide-remove-active (如果元素将显示)

这样的效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger里面的transition-delay的样式时间。

具体情况还需要我们自己去实践。

参考：http://www.open-open.com/lib/view/open1437529447443.html