Page 342 - AngularJS权威教程

322 第 22 章 Angular 动画

(1) 本元素被插入父元素中，或者是after元素后面；
(2) $animate运行所有在元素上用JavaScript定义的动画；

(3) .ng-enter类被添加到元素的classList中；
(4) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性。

(5) .ng-enter-active类被添加到元素的classList中（触发动画）；

(6) $animate用定义过的持续时间等待完成；
(7) 动画结束，$animate从元素移除.ng-enter和.ng-enter-active类；
(8) 触发done()回调函数（如果定义了的话）。

22.10.4 leave()

leave()方法运行leave动画。当它结束运行时，会把元素从DOM移除。动画开始之后，它
会在元素上添加.ng-leave和.ng-leave-active类。
leave()方法带两个参数。

 element（jQuery/jqLite元素）
正在建立动画的元素。

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

angular.module('myApp', ['ngAnimate'])
.directive('myDirective', function($animate) {
return {
template: '<div class="myDirective">' +
'<h2>Hi</h2></div>',
link: function(scope, ele, attrs) {
ele.bind('click', function() {
$animate.leave(ele);
});
}
}
});
调用leave()动画方法会经历如下步骤：

(1) $animate可运行所有在元素上用JavaScript定义的动画；
(2) .ng-leave类被添加到元素的classList中；

(3) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
(4) .ng-leave-active类被添加到元素的classList中（触发动画）；
(5) $animate用定义过的持续时间等待完成；

(6) 动画结束，$animate从元素移除.ng-leave和.ng-leave-active类；
(7) 元素被从DOM移除；