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>.