AngularJS Animation是如何运作的？
浏览数：32 /
时间：2015年06月09日
当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}}" |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
