AngularJS–Animations(動畫)

標籤：style   blog   http   io   color   ar   使用   java   sp   

在AngularJS 1.3 中，給一些指令(eg:   ngRepeat,ngSwitch, ngView等)提供了一個動畫的鉤子，也就是說，這些指令可以使用 $animate 動畫服務(是一個服務哦，可以注入到controller裡面去)。 這些動畫鉤子可以再整個指令的生命週期中隨著各種指示，觸發等進行動作，顯示動畫效果，我們可以使用HTML5的各種動畫效果，類似 Transition，Keyframe，或者回呼函數(這取決於是否給指令配置了動畫)。如果在一個factoryFactory 方法中，使用AngularJS或者Javascript代碼定義，設定了規範的命名空間了的時候，就可以使用動畫了（這句話感覺翻譯的有問題，忘指點迷津…）。

如果你的應用程式沒有依賴於 ngAnimate 模組的話，你的所有動畫都是沒有用的。

下面我們來看一下一個使用 ngShow 和 ngHide 進行顯示隱藏的動畫：

<style>.sample-show-hide {  padding:10px;  border:1px solid black;  background:white;}.sample-show-hide {  -webkit-transition:all linear 0.5s;  transition:all linear 0.5s;}.sample-show-hide.ng-hide {  opacity:0;}</style><div ng-app>   <div ng-init="checked=true">    <label>      <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...    </label>    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">      Visible...    </div>  </div></div>

因為有動畫效果，這裡沒法顯示效果，自己實驗吧！

 

 

安裝動畫模組

可以查看動畫模組來查看如何安裝。

 

 

它們是怎麼樣工作的

在AngularJS中的動畫，完全是基於css 樣式類的。所以你首先得有這樣動畫class。我們還是來看看例子吧！

<div ng-repeat="item in items" class="repeated-item">{{ item.id }}</div>

 

未完待續…

AngularJS–Animations(動畫)