AngularJS Animation是如何运作的？

时间：2014-08-05 14:28:59 阅读：523 评论：0 收藏：0 [点我收藏+]

当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}}"

原文：http://my.oschina.net/tommyfok/blog/298082

踩

(0)

评论一句话评论（0）

分享档案

更多>