Page 341 - AngularJS权威教程

22.10 创建自定义动画 321

} 19
}
});

调用removeClass()动画方法会经历如下步骤： 20
(1) 运行所有在元素上用JavaScript定义的动画；
21
(2) [className]-remove类被添加到元素上；
(3) $animate检查CSS样式来寻找过渡/动画的持续时间和延迟属性；
22
(4) [className]-remove-active类被添加到元素的classList中（触发CSS动画）；
(5) $animate用定义过的持续时间等待完成； 23

(6) 动画结束， $animate 移除三个添加 的类： [className] 、 [className]-remove 和
[className]-remove-active； 24

(7) 触发done()回调函数（如果定义了的话）。
25
22.10.3 enter()

enter()方法把元素添加到它在DOM中的父元素，然后运行enter动画。动画开始之后， 26
$animation服务会添加ng-enter和ng-enter-active类，给指令一个机会来建立动画。
enter()方法最多可以带四个参数。 27

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

 parent（jQuery/jqLite元素）
29
这个元素的父元素，它是我们enter动画的焦点。

 after（jQuery/jqLite元素） 30
这个元素的兄弟元素，它将会成为enter动画的焦点。
31
 done（函数）
当动画完成时调用的回调函数。
32
angular.module('myApp', ['ngAnimate'])
.directive('myDirective', function($animate) {
return { 33
template: '<div class="myDirective">' +
'<h2>Hi</h2></div>',
link: function(scope, ele, attrs) {
ele.bind('click', function() { 34
$animate.enter(ele, ele.parent());
});
} 35
}
});
调用enter()动画方法会经历如下步骤： 36