如何在Angular中使用動畫

本文講一下Angular中動畫應用的部分。

首先，Angular本生不提供動畫機制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機制，Angular也不提供具體的動畫樣式，所以說，它的自由度和可定制性挺大的。

那么，剛開始需要在項目的入口html文件中引入Angular框架(angular.js)，然后引入angular.animate.js。

在項目的js入口文件app.js中，新建項目模塊，并且添加所依賴的模塊ng-Animate(有其他需要的模塊的話也可以引入，順序沒關系)

var demoApp = angular.module('demoApp', ['ngAnimate','ui.router']);

這里中間插入一句，建議Angular中的依賴注入用如下模式，在ads、bds或者其他的前端自動化工具打包壓縮后不會產生問題，因為僅僅通過 給function傳參的形式注入依賴，Angular是會對注入的變量名有嚴格的要求（如$scope變量名在控制器中注入時變量名只能 寫$scope）：

//控制器.js、指令.js、過濾器.js的依賴注入建議都用這種方式寫
//這是ui-route的配置，在app.js
demoApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
    // your code.
}]);

好了，回到正題上。引入了ngAnimate之后，Angular的動畫機制就能生效了。

Angular文檔中寫到如下指令和支持的動畫

那么，怎么使用呢? 本文拿ng-repeat這個指令來做個介紹，其他的一些指令使用方式幾乎相同，可類推。

ng-repeat 主要是對一個list的展示，這些元素是是被創建出來加入到DOM結構中去的，那么，它的動畫過程為：

創建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默認狀態
默認狀態 -> .ng-leave -> .ng-leave-active -> 銷毀元素

所以可以通過設置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的樣式，加上css3的動畫來顯示出動畫，如：

<!-- HTML片段 -->
<div ng-init="users = [1,2,3,4,5]"></div>
<input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />
<ul>
<li class="item" ng-repeat="user in users | filter: u as result">
  {{user}}
</li>
</ul>
/* css片斷 */
/*ng-repeat的元素*/
.item{
  -webkit-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;
}
/*動畫開始前*/
.item.ng-enter{
  opacity:0;
}
/*動畫過程*/
.item-ng-enter-active{
  opacity:1;
}

這樣的效果是對所有元素同時應用，可能實際運用中需要有一個先后的漸變出現的效果，這時候可以設置ng-enter-stagger來實現.

/*不同時出現*/
.item.ng-enter-stagger {
    transition-delay:0.5s;
    transition-duration:0;
}

同樣的，這些angular animate提供的動畫的class也可以應用到頁面切換中去。如果通過寫css的方式還無法滿足需求，當然，還可以通過JS的方式來控制動畫，下面的代碼你可以理解為是一個模版

/* CLASS 是需要應用的class名，handles是支持的操作，如下圖所示*/
/* 這里如果是應用在ui-view 的class上，模版會疊加(坑)*/
demoApp.animation('.classname',function(){
  return {
    'handles':function(element,className,donw){
      //... your code here
      //回調
      return function(cancelled){
        // alert(1);
      }
    }
  }
})

支持的操作:

本文主要簡單的說明了ngAnimate在Angular項目中的使用，具體可以做出怎樣的效果，還需要親自實踐一番。

其他：一個Angular 第三方動畫 。

(完。附上簡單的demo)