首页 > 代码库 > AngularJS Animation是如何运作的?
AngularJS Animation是如何运作的?
当Angular往repeat list里面加入一个元素的时候,.ng-enter 和 .ng-enter CSS 类会被自动赋予给该元素。以下是enter:新增、leave:移除、move:移动位置 这三种不同的情况下,该元素的类变化情况:
事件 | 初始类 | 终结类 | 触发该CSS类变化的指令 |
---|---|---|---|
enter | .ng-enter | .ng-enter-active | ngRepeat, ngInclude, ngIf, ngView |
leave | .ng-leave | .ng-leave-active | ngRepeat, ngInclude, ngIf, ngView |
move | .ng-move | .ng-move-active | ngRepeat |
In addition, ngAnimate also supports CSS-based animations which follow a similar naming convention. Here‘s a breakdown of that:
事件 | 起始类 | 结束类 | 触发该CSS类变化的指令 |
---|---|---|---|
hide an element | .ng-hide-add | .ng-hide-add-active | ngShow, ngHide |
show an element | .ng-hide-remove | .ng-hide-remove-active | ngShow, ngHide |
adding a class to an element | .CLASS-add | .CLASS-add-active | ngClass and class="{{expression}}" |
removing a class from an element | .CLASS-remove | .CLASS-remove-active | ngClass and class="{{expression}}" |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。