AngularJS 實現JavaScript 動畫效果詳解_AngularJS

AngularJS 應用中實現 JavaScript 動畫效果

AngularJS 是一組用於建立單頁Web應用的豐富架構，給構建豐富互動地應用帶來了所有需要的功能。其中一項主要的特性就是Angular帶來了對動畫的支援。

我們能夠在應用的部分內容當中使用動畫來表明一些變化正在發生。在我上一篇文章當中，我講到了在Angular應用中對CSS動畫的支援。在這篇文章當中，我們會看到怎樣利用JavaScript指令碼在AngularJS應用當中產生動畫效果。

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

 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動畫基本的架構：

 angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) { return { event: function(elem, done){  //logic of animation  done(); } };}); 

這是有一些在AngularJS中寫JavaScript動畫時需要記住的要點：
1.動畫的名字以點（.）開頭

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

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

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

我們有若干的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標記來將它應用到目標指令上。

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不夠人性化。所以，必須小心並最佳化的使用這件利器。