当前位置: 首页 > 工具软件 > ng-animate > 使用案例 >

ngAnimate模块

辛麻雀
2023-12-01
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

 

转载于:https://www.cnblogs.com/xfdmb/p/6781447.html

 类似资料: