AngularJS 應(yīng)用中實(shí)現(xiàn) JavaScript 動(dòng)畫效果

AngularJS 是一組用于創(chuàng)建單頁(yè)Web應(yīng)用的豐富框架，給構(gòu)建豐富交互地應(yīng)用帶來(lái)了所有需要的功能。其中一項(xiàng)主要的特性就是Angular帶來(lái)了對(duì)動(dòng)畫的支持。

我們能夠在應(yīng)用的部分內(nèi)容當(dāng)中使用動(dòng)畫來(lái)表明一些變化正在發(fā)生。在我上一篇文章當(dāng)中，我講到了在Angular應(yīng)用中對(duì)CSS動(dòng)畫的支持。在這篇文章當(dāng)中，我們會(huì)看到怎樣利用JavaScript腳本在AngularJS應(yīng)用當(dāng)中生成動(dòng)畫效果。

在Angular當(dāng)中，CSS和JavaScript之間唯一的區(qū)別就是它們的定義。沒(méi)有什么區(qū)別妨礙到被定義的動(dòng)畫被使用。首先，我們需要加載ngAnimate模塊到我們應(yīng)用的root模塊當(dāng)中。

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

而所有將被處理的JavaScript動(dòng)畫事件依然保持不變。以下是一個(gè)直接支持的動(dòng)畫列表和它們對(duì)應(yīng)的不同行為：

指令事件集

ng-view 
ng-include
 ng-switch
 ng-if enter
 leave
ng-repeat enter
 leave
 move
ng-show
 ng-hide
 ng-class add
 remove

以上列表和上一篇文章一樣，但沒(méi)有提到相應(yīng)的CSS類，因?yàn)槲覀儾恍枰玫剿鼈儊?lái)定義JavaScript動(dòng)畫。所有這些事件只有在應(yīng)用模塊加載了ngAnimate模塊后才會(huì)產(chǎn)生。現(xiàn)在讓我們看一看如何讓這些指令動(dòng)起來(lái)。

自定義Angular動(dòng)畫的語(yǔ)法

以下是一個(gè)自定義JavaScript動(dòng)畫基本的框架：

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

這是有一些在AngularJS中寫JavaScript動(dòng)畫時(shí)需要記住的要點(diǎn)：
1.動(dòng)畫的名字以點(diǎn)（.）開頭

2.所有動(dòng)畫行為接受兩個(gè)參數(shù)：

•在當(dāng)前即將運(yùn)行動(dòng)畫的DOM元素中的一個(gè)對(duì)象，要么是在jQuery沒(méi)有趕在AngularJS加載之前進(jìn)行加載的一個(gè)jQlite對(duì)象，要么是一個(gè)jQuery對(duì)象。

•一個(gè)動(dòng)畫結(jié)束時(shí)的回調(diào)函數(shù)。指令對(duì)應(yīng)的行為動(dòng)作被暫停，直到回調(diào)函數(shù)被調(diào)用。

我們有若干的JavaScript庫(kù)，像jQuery、Greensock、Anima和其它幾個(gè)讓編寫動(dòng)畫變得容易的庫(kù)。為了保持簡(jiǎn)潔，我正在這篇文章中使用jQuery來(lái)創(chuàng)建動(dòng)畫。為了學(xué)習(xí)其它幾個(gè)庫(kù)，你可以訪問(wèn)它們對(duì)應(yīng)的網(wǎng)站。

讓ng-view動(dòng)起來(lái)

在一個(gè)ng-view指令上使用的動(dòng)畫在切換AngularJS應(yīng)用的視圖時(shí)運(yùn)行。

以下是一塊視圖正在出現(xiàn)時(shí)，動(dòng)畫所引起的視覺效果：

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); } };}); 

以上創(chuàng)建了一個(gè)視圖進(jìn)入畫面時(shí)的滑入效果。其中done方法被做為回調(diào)函數(shù)傳入。這是為了表明動(dòng)畫已經(jīng)結(jié)束，并且現(xiàn)在AngularJS框架可以繼續(xù)下一個(gè)動(dòng)作。

注意animate()方法被調(diào)用的方法。我們不必將這個(gè)元素轉(zhuǎn)換成一個(gè)jQuery對(duì)象，因?yàn)閖Query在加載AngularJS前已經(jīng)加載。

現(xiàn)在我們需要應(yīng)用這個(gè)動(dòng)畫效果到ng-view指令上。盡管這個(gè)動(dòng)畫是在JavaScript里定義的，按照約定我們使用一個(gè)class標(biāo)記來(lái)將它應(yīng)用到目標(biāo)指令上。

ng-repeat 動(dòng)畫

在你可以選擇使用的指令里面，ng-repeat是一個(gè)非常重要的指令。還有兩個(gè)基本的操作指令是過(guò)濾和排序。根據(jù)執(zhí)行的操作添加，移動(dòng)，或者移除相應(yīng)的指令。

下面演示使用一些基本的動(dòng)畫，當(dāng)發(fā)生變化的時(shí)候你就可以看到相應(yīng)的動(dòng)畫效果。

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動(dòng)畫

ng-hide指令用于添加或移除目標(biāo)元素的ng-hide樣式類。 為了使用某個(gè)動(dòng)畫，我們經(jīng)常需要添加或移除css樣式。 將類名傳遞給動(dòng)畫處理類來(lái)實(shí)現(xiàn)這個(gè)效果。 這可以讓我們檢查這個(gè)類，對(duì)代碼進(jìn)行適當(dāng)?shù)男薷摹?/p>

下面是一個(gè)動(dòng)畫的示例代碼，用ng-hide指令實(shí)現(xiàn)元素的漸隱漸顯效果：

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();  } } };});

讓自定義指令動(dòng)起來(lái)

為了讓自定義指令產(chǎn)生動(dòng)畫效果，我們需要用到$animate 這個(gè)服務(wù)。盡管$animate服務(wù) 是AngularJS核心框架的一部分，也需要加載ngAnimate后才能讓這個(gè)服務(wù)發(fā)揮最大的作用。

使用上一篇文章中同樣的例子，我們將展現(xiàn)一頁(yè)課程列表。我們創(chuàng)建一條指令來(lái)顯示格子中課程的細(xì)節(jié)內(nèi)容，并且格子中的內(nèi)容會(huì)在點(diǎn)擊"View Statistics"這個(gè)鏈接時(shí)改變。讓我們添加一種動(dòng)畫來(lái)把這個(gè)轉(zhuǎn)換效果呈現(xiàn)給用戶。

當(dāng)轉(zhuǎn)換動(dòng)畫開始的時(shí)候，我們將添加一個(gè)CSS類標(biāo)記，結(jié)束時(shí)，移去這個(gè)類標(biāo)記。以下是針對(duì)這個(gè)指令的示例代碼：

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();  });  }); } };}); 

 正如你所看到的，我們?cè)趧?dòng)畫結(jié)束時(shí)執(zhí)行這個(gè)動(dòng)作。在瀏覽器的開發(fā)者工具中，我們會(huì)在查看指令元素時(shí)發(fā)現(xiàn)switching-active和switching-add這兩個(gè)類標(biāo)記正被很快的添加隨后被移除。我們可以通過(guò)定義一個(gè)CSS轉(zhuǎn)換樣式或者一個(gè)自定義的JavaScript動(dòng)畫來(lái)查看動(dòng)畫的效果。以下就是一個(gè)簡(jiǎn)單地CSS轉(zhuǎn)換樣式，可以被用于上面提到的指令，為了簡(jiǎn)潔性我們移去了特定的前綴：

.det-anim.switching { transition: all 1s linear; position: relative; opacity: 0.5; left: -20px;} 

又或者，這里有一個(gè)jQuery寫的動(dòng)畫，可以用于同樣的指令：

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();  } } }}); 

這些動(dòng)畫當(dāng)中，如果它可以應(yīng)用于內(nèi)建的指令上，它同樣也可以被應(yīng)用到自定義的指令上：

<div course-details   class="det-anim"  title="{{course.title}}"></div> 

你可以在示例頁(yè)面看到以上所有的動(dòng)畫運(yùn)行時(shí)的效果。

結(jié)論

動(dòng)畫，當(dāng)被適合并正常的運(yùn)用時(shí)，將給應(yīng)用程序帶來(lái)生氣。正如我們所看到的，AngularJS對(duì)CSS和JavaScript動(dòng)畫都提供各種支持。你可以根據(jù)團(tuán)隊(duì)的情況來(lái)挑選其中一種。

但是，使用太多的動(dòng)畫將會(huì)使得應(yīng)用程序變得緩慢，而對(duì)于用戶來(lái)，這將使應(yīng)用程序看起來(lái)i不夠人性化。所以，必須小心并最優(yōu)化的使用這件利器。