Page 340 - AngularJS权威教程

320 第 22 章 Angular 动画

ele.bind('click', function() {
$animate.addClass(ele, 'greenlight');
});
}
}
});
调用addClass()方法会经过如下步骤：

(1) 运行所有在元素上用JavaScript定义的动画；
(2) [className]-add类被添加到元素上；

(3) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
(4) [className]-add-active类被添加到元素的classList中（触发CSS动画）；

(5) $animate用定义过的持续时间等待完成；
(6) 动画结束， $animate移除两个添加的类： [className]-add和[className]-add-active；

(7) className类被添加到元素上；

(8) 触发done()回调函数（如果定义了的话）。

22.10.2 removeClass()

removeClass()方法触发了一个基于className的自定义动画事件，并且移除在className
值中定义的CSS类。当从DOM元素上移除一个类的时候，$animate服务给这个className添加了
一个叫-remove的后缀来让我们建立动画。

如果没有CSS过渡，在CSS选择器（[className]-remove）上也没有定义关键
帧动画，ngAnimate就不会触发这个动画，只是会把这个样式类加上。

removeClass()方法带三个参数。
 element（jQuery/jqLite元素）

正在建立动画的元素。
 className（字符串）

正在建立动画，并且从元素上移除的CSS类。

 done（函数）
当动画完成时调用的回调函数。

angular.module('myApp', ['ngAnimate'])
.directive('myDirective', function($animate) {
return {
template: '<div class="myDirective"></div>',
link: function(scope, ele, attrs) {
ele.bind('click', function() {
$animate.addClass(ele, 'greenlight');
});