在AngularJS應用中實現一些動畫效果的代碼

 　　這篇文章主要介紹了在AngularJS應用中實現一些動畫效果的代碼,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下

　　在Angular當中，CSS和JavaScript之間唯一的區別就是它們的定義。沒有什麼區別妨礙到被定義的動畫被使用。首先，我們需要加載ngAnimate模塊到我們應用的root模塊當中。

　　?

1 angular.module('coursesApp', ['ngAnimate']);

　　而所有將被處理的JavaScript動畫事件依然保持不變。以下是一個直接支持的動畫列表和它們對應的不同行為：

　　指令事件集

　　ng-view

　　ng-include

　　ng-switch

　　ng-if enter

　　leave

　　ng-repeat enter

　　leave

　　move

　　ng-show

　　ng-hide

　　ng-class add

　　remove

　　以上列表和上一篇文章一樣，但沒有提到相應的CSS類，因為我們不需要用到它們來定義JavaScript動畫。所有這些事件只有在應用模塊加載了ngAnimate模塊後才會產生。現在讓我們看一看如何讓這些指令動起來。

　　自定義Angular動畫的語法

　　以下是一個自定義JavaScript動畫基本的框架：

　　?

1 2 3 4 5 6 7 8 angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) { return { event: function(elem, done){ //logic of animation done(); } }; });

　　這是有一些在AngularJS中寫JavaScript動畫時需要記住的要點：

　　動畫的名字以點(.)開頭

　　所有動畫行為接受兩個參數：

　　在當前即將運行動畫的DOM元素中的一個對象，要麼是在jQuery沒有趕在AngularJS加載之前進行加載的一個jQlite對象，要麼是一個jQuery對象。

　　一個動畫結束時的回調函數。指令對應的行為動作被暫停，直到回調函數被調用。

　　我們有若干的JavaScript庫，像jQuery、Greensock、Anima和其它幾個讓編寫動畫變得容易的庫。為了保持簡潔，我正在這篇文章中使用jQuery來創建動畫。為了學習其它幾個庫，你可以訪問它們對應的網站。

　　讓ng-view動起來

　　在一個ng-view指令上使用的動畫在切換AngularJS應用的視圖時運行。

　　以下是一塊視圖正在出現時，動畫所引起的視覺效果：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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標記來將它應用到目標指令上。

　　?

1 <div ng-view class="view-slide-in"></div>

　　ng-repeat 動畫

　　在你可以選擇使用的指令裡面，ng-repeat是一個非常重要的指令。還有兩個基本的操作指令是過濾和排序。根據執行的操作添加，移動，或者移除相應的指令。

　　下面演示使用一些基本的動畫，當發生變化的時候你就可以看到相應的動畫效果。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 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指令實現元素的漸隱漸顯效果：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 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"這個鏈接時改變。讓我們添加一種動畫來把這個轉換效果呈現給用戶。