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

還有史上最牛Angular動畫教程