Page 317 - AngularJS权威教程

22.2 它是如何运作的 297

19

第22章 20

Angular动画
21

22

Angular团队创建了ngAnimate模块，让我们的Angular应用能够提供CSS和JavaScript动画。 23
在Angular应用中创建动画，有几种途径：
24
 使用CSS3动画；
 使用JavaScript动画；
 使用CSS3过渡。 25
本章旨在讨论这三种动画方法，并且对如何能做出自己的动画有一个深刻的理解。
26

22.1 安装
27
自1.2.0起，动画就不再是Angular核心的一部分了，它们存在于自己的模块中。为了在Angular
应用中包含动画，需要在应用中安装并且引用这个模块。
28
可以从code.angularjs.org 上下载它，并将它保存到一个能从HTML引用到的位置，比如
①
js/vendor/angular-animate.js。
29
也可以使用Bower来安装它，这会把它放在Bower目录中。想要知道更多有关Bower的信息，
请参阅34.6节。
30
$ bower install --save angular-animate
引用了Angular自身之后，需要在HTML中引用这个动画库。 31
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-animate.js"></script>
32
最后，需要在我们的应用模块中把ngAnimate模块当作依赖项来引用：

angular.module('myApp', ['ngAnimate']); 33
至此，就已经准备好使用AngularJS来呈现动画了。
34
22.2 它是如何运作的

35
$animate服务默认给动画元素的每个动画事件（参见后面的列表）添加了两个CSS类。

—————————— 36
① http://code.angularjs.org