Page 343 - AngularJS权威教程

22.10 创建自定义动画 323

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

22.10.5 move()
20
move()函数触发move DOM动画。在动画开始之前，$animate服务或者把元素插入父容器中，或
者直接加到after元素之后，如果有的话。动画开始后，为了动画的持续， .ng-move和.ng-move-active 21
就会被添加。

move()方法带有四个参数。 22
 element（jQuery/jqLite元素）

正在建立动画的元素。 23
 parent（jQuery/jqLite元素）
24
这个元素的父元素，它是我们enter动画的焦点。
 after（jQuery/jqLite元素）
25
这个元素的兄弟元素，它将会成为enter动画的焦点。

 done（函数） 26
当动画完成时调用的回调函数。
27
angular.module('myApp', ['ngAnimate'])
.directive('myDirective', function($animate) {
return {
template: '<div class="myDirective">' + 28
'<h2>Hi</h2></div>',
link: function(scope, ele, attrs) {
ele.bind('click', function() { 29
$animate.move(ele, ele.parent());
});
}
} 30
});
调用move()动画方法会经历如下步骤： 31
(1) 元素被移到父元素中，或者在after元素之后；

(2) $animate可运行所有在元素上用JavaScript定义的动画； 32
(3) .ng-move类被添加到元素的classList中；
33
(4) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
(5) .ng-move-active类被添加到元素的classList中（触发动画）；
34
(6) $animate用定义过的持续时间等待完成；
(7) 动画结束，$animate从元素移除.ng-move和.ng-move-active类； 35

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