ngAnimate模块

Posted 2020-09-14 幸福的目标

ngAnimate模块和ngRoute一样，不属于核心模块，都是需要script引入，然后在模块内依赖注入
那ngAnimate做了什么？
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 html 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
支持的指令：
指令    支持动画
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这个指令来做个介绍，其他的一些指令使用方式几乎相同，可类推。
ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程为：
[javascript] view plain copy
<span style="font-family:Microsoft YaHei;font-size:14px;">创建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默认状态  
默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素</span>  
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