在Angular當中，CSS和JavaScript之間唯一的區別就是它們的定義。沒有什麼區別妨礙到被定義的動畫被使用。首先，我們需要載入ngAnimate模組到我們應用的root模組當中。
angular.module('coursesApp', ['ngAnimate']);
而所有將要處理的JavaScript動畫事件依然保持不變。以下是一個直接支援的動畫清單和它們對應的不同行為：
指令事件集
以上列表和上一篇文章一樣，但沒有提到對應的CSS類，因為我們不需要用到它們來定義JavaScript動畫。所有這些事件只有在應用程式模組載入了ngAnimate模組後才會產生。現在讓我們來看看如何讓這些指令動起來。
自訂Angular動畫的語法
以下是一個自訂JavaScript動畫基本的框架：
angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) {
return {
event: function(elem, done){
//logic of animation
done();
}
};
});
這是有一些在AngularJS中寫JavaScript動畫時需要記住的要點：
我們有若干的JavaScript函式庫，像是jQuery、Greensock、Anima和其它幾個讓編寫動畫變得容易的函式庫。為了保持簡潔，我正在這篇文章中使用jQuery來創建動畫。為了學習其它幾個庫，你可以訪問它們對應的網站。
讓ng-view動起來
在一個ng-view指令上使用的動畫在切換AngularJS應用的視圖時運行。
以下是一塊視圖正在出現時，動畫所造成的視覺效果：
courseAppAnimations.animation('.view-slide-in', function () {
return {
enter: function(element, done) {
element.css({
opacity: 0.5,
position: "relative",
top: "10px",
left: "20px"
})
.animate({
top: 0,
left: 0,
opacity: 1
}, 1000, done);
}
};
});
以上建立了一個視圖進入畫面時的滑入效果。其中done方法被做為回呼函數傳入。這是為了表明動畫已經結束，現在AngularJS框架可以繼續下一個動作。
注意animate()方法被呼叫的方法。我們不必將這個元素轉換成一個jQuery對象，因為jQuery在載入AngularJS前已經載入。
現在我們要套用這個動畫效果到ng-view指令上。儘管這個動畫是在JavaScript裡定義的，按照約定我們使用一個class標記來將它套用到目標指令上。
<div ng-view class="view-slide-in"></div>
ng-repeat 動畫
在你可以選擇使用的指令裡面，ng-repeat是一個很重要的指令。還有兩個基本的操作指令是過濾和排序。根據執行的操作添加，移動，或移除相應的指令。
下面示範使用一些基本的動畫，當發生變化的時候就可以看到對應的動畫效果。
courseAppAnimations.animation('.repeat-animation', function () {
return {
enter : function(element, done) {
console.log("entering...");
var width = element.width();
element.css({
position: 'relative',
left: -10,
opacity: 0
});
element.animate({
left: 0,
opacity: 1
}, done);
},
leave : function(element, done) {
element.css({
position: 'relative',
left: 0,
opacity: 1
});
element.animate({
left: -10,
opacity: 0
}, done);
},
move : function(element, done) {
element.css({
left: "2px",
opacity: 0.5
});
element.animate({
left: "0px",
opacity: 1
}, done);
}
};
});
Ng-hide動畫
ng-hide指令用於新增或移除目標元素的ng-hide樣式類別。 為了使用某個動畫，我們經常需要添加或移除css樣式。 將類別名稱傳遞給動畫處理類別來實現這個效果。 這可以讓我們檢查這個類，並對程式碼進行適當的修改。
下面是一個動畫的範例程式碼，用ng-hide指令實現元素的漸隱漸顯效果：
courseAppAnimations.animation('.hide-animation', function () {
return {
beforeAddClass : function(element, className, done) {
if (className === 'ng-hide') {
element.animate({
opacity: 0
},500, done);
} else {
done();
}
},
removeClass : function(element, className, done) {
if (className === 'ng-hide') {
element.css('opacity',0);
element.animate({
opacity: 1
}, 500, done);
} else {
done();
}
}
};
});
讓自訂指令動起來
為了讓自訂指令產生動畫效果，我們需要用到$animate 這個服務。儘管$animate服務 是AngularJS核心架構的一部分，也需要載入ngAnimate後才能讓這個服務發揮最大的作用。
使用上一篇文章中同樣的例子，我們將展現一頁課程清單。我們建立一條指令來顯示格子中課程的細節內容，並且格子中的內容會在點擊"View Statistics"這個連結時改變。讓我們加入一個動畫來把這個轉換效果呈現給使用者。
當轉換動畫開始的時候，我們將新增一個CSS類別標記，結束時，移去這個類別標記。以下是針對這個指令的範例程式碼：
app.directive('courseDetails', function ($animate) {
return {
scope: true,
templateUrl: 'courseDetails.html',
link: function (scope, elem, attrs) {
scope.viewDetails = true;
elem.find('button').bind('click', function () {
$animate.addClass(elem, "switching", function () {
elem.removeClass("switching");
scope.viewDetails =! scope.viewDetails;
scope.$apply();
});
});
}
};
});
正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：
.det-anim.switching {
transition: all 1s linear;
position: relative;
opacity: 0.5;
left: -20px;
}
又或者，这里有一个jQuery写的动画，可以用于同样的指令：
courseAppAnimations.animation('.js-anim', function () {
return {
beforeAddClass: function(element, className, done) {
if (className === 'switching') {
element.animate({
opacity: 0
},1000, function (){
element.css({
opacity: 1
});
done();
});
}
else {
done();
}
}
}
});
这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：
<div course-details
class="det-anim"
title="{{course.title}}">
</div>
你可以在示例页面看到以上所有的动画运行时的效果。
结论
动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。
但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。
