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

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

而所有將被處理的JavaScript動畫事件依然保持不變。以下是一個直接支持的動畫列表和它們對應(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

以上列表和上一篇文章一樣，但沒有提到相應(yīng)的CSS類，因為我們不需要用到它們來定義JavaScript動畫。所有這些事件只有在應(yīng)用模塊加載了ngAnimate模塊后才會產(chǎn)生?，F(xiàn)在讓我們看一看如何讓這些指令動起來。
 自定義Angular動畫的語法

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

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

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

•     動畫的名字以點（.）開頭
•     所有動畫行為接受兩個參數(shù)：
•         在當前即將運行動畫的DOM元素中的一個對象，要么是在jQuery沒有趕在AngularJS加載之前進行加載的一個jQlite對象，要么是一個jQuery對象。
•         一個動畫結(jié)束時的回調(diào)函數(shù)。指令對應(yīng)的行為動作被暫停，直到回調(diào)函數(shù)被調(diào)用。

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

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

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

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)建了一個視圖進入畫面時的滑入效果。其中done方法被做為回調(diào)函數(shù)傳入。這是為了表明動畫已經(jīng)結(jié)束，并且現(xiàn)在AngularJS框架可以繼續(xù)下一個動作。

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

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

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

ng-repeat 動畫
在你可以選擇使用的指令里面，ng-repeat是一個非常重要的指令。還有兩個基本的操作指令是過濾和排序。根據(jù)執(zhí)行的操作添加，移動，或者移除相應(yīng)的指令。
下面演示使用一些基本的動畫，當發(fā)生變化的時候你就可以看到相應(yī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動畫

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

下面是一個動畫的示例代碼，用ng-hide指令實現(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();
  }
 }
 };
});

讓自定義指令動起來

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

當轉(zhuǎn)換動畫開始的時候，我們將添加一個CSS類標記，結(jié)束時，移去這個類標記。以下是針對這個指令的示例代碼：
 

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

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

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>

你可以在示例頁面看到以上所有的動畫運行時的效果。
 
結(jié)論

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

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

最新評論