首页 > 代码库 > ngAnimate模块
ngAnimate模块
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
ngAnimate模块
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。