Animate 動畫

angular 也提供了animate service 

涉及 $animate,$animateProvider

1.2辦法後經過 angular-animate.js 還擴展了一些功能 

 

先來講說大體執行過程實現手法。

現代遊覽器咱們一般是用css3的動畫取代了jQeury那種動畫實現手法。

咱們經過給一個element 添加一個 class 來鏈接 css寫好的一系列動畫效果 .

angular 經過ng-show等，爲class添加一些 class="ng-hide ng-animate ng-remove-hide ng-remove -active" 等

這些class 來配合你寫的css 實現動畫效果 

好比ng-show的值改變時，angular會爲你的element添加一些class，你的css就會渲染一個動畫出來了。

angular還未咱們作了一件事，就是remove掉這些class , 原理是經過獲取element的css取出duration的時間，而後timeout remove class 

 

須要注意的事 : 

angular 明文規定 

disable animations during bootstrap, but once we bootstrapped, wait again
for another digest until enabling animations. The reason why we digest twice
is because all structural animations (enter, leave and move) all perform a
post digest operation before animating. If we only wait for a single digest
to pass then the structural animation would render its animation on page load.
(which is what we're trying to avoid when the application first boots up.)

在運行 bootstrapped 的時候是不會觸發 animate 的。以後的事件纔會！

緣由是，好比咱們有個fadeIn/Out效果，page load 時咱們要hide

那麼在bootstrapped digest時, 若是 ng-show=false 同時加上了 fadeOut的 effect 那可能不是咱們但願看到的 (咱們更但願它直接display node起來)， 因此在page load 時，animate 是不運行的 ， 以後咱們show ,hide 的時候纔會運行 fadeIn/Out 的動畫

若是是在使用指令的時候使用templateUrl 也可能會出現這樣的情形，由於templateUrl會發http請求，是異步操做，頁面會先渲染，等到template加載回來，page load 算已經結束了。

要避免這樣的狀況能夠爲先添加ng-hide在class上，這樣它會直接hide起來了 <div class='ng-hide'></div>.