Page 318 - AngularJS权威教程

298 第 22 章 Angular 动画

$animate服务支持多个Angular内置的指令，它们无需额外的配置即可支持动画。它很灵活，
我们可以为自己的指令创建动画。
所有这些预先存在的支持动画的指令，都是通过监控指令上的事件实现的。例如，当一个新
的ngView进入并且把新内容带进浏览器时，这个事件就叫做ngView的enter事件。当ngHide准备
显示一个元素的时候，remove事件就会触发。

下面是指令以及在不同状态触发的事件列表。我们会使用这些事件来定义在每个状态上，动
画会如何工作。
指 令 事 件
ngRepeat enter、leave、move
ngView enter、leave
ngInclude enter、leave
ngSwitch enter、leave
ngIf enter、leave
ngClass或者class="…" add、remove
ngShow add、remove (.ng-class)
ngHide add、remove

$animate服务基于指令发出的事件来添加特定的样式类。对于结构性的动画（比如进入、移
动和离开），添加上去的CSS类是ng-[EVENT]和ng-[EVENT]-active这样的形式。
对于基于样式类的动画（比如ngClass），动画样式类的形式是[CLASS]-add、[CLASS]-add-
actdive、[CLASS]-remove、[CLASS]-remove-active。

最后，对于ngShow和ngHide，只有.ng-hide类会被添加和移除，它的形式跟ngClass一
样：.ng-hide-add、.ng-hide-add-active、.ng-hide-remove、.ng-hide-remove-active。

自动添加类

触发enter事件的指令会在DOM变更时收到一个.ng-enter样式类，然后，Angular添加
ng-enter-active类，它会触发动画。ngAnimate自动检测CSS代码来判定动画什么时候完成。
这个事件完成时，Angular会从DOM元素上移除这两个类，使我们能够在DOM元素上定义动
画相关的属性。

如果浏览器不支持CSS过渡或者动画，动画会开始，然后立即结束，DOM会处于最终的状态，
不会添加过渡或者动画的样式类。
所有支持的结构性动画事件都遵循同样的约定：进入、离开、移动。基于样式的动画事件略
有不同（如上所述）。

22.3 使用 CSS3 过渡

迄今为止，我们在应用中包含动画的最简单的方式是使用CSS3过渡，除了IE9和更早版本外，
它都能运行。