Page 339 - AngularJS权威教程

22.10 创建自定义动画 319

建立了指令之后，我们可以调用$animate函数创建一个动画，与我们的指令通信。 19

angular.module('myApp', ['ngAnimate'])
.animation('.scrollerAnimation', function() {
return { 20
animateFun: function(element, done) {
// 我们可以在这个函数中
// 做任意想做的事 21
// 但是需要调用done
// 来让angular知道动画结束了
}
} 22
});
$animate服务暴露了一些方法，为内置指令的动画事件提供帮助。这些$animate服务暴露 23
出来的事件是：

 enter； 24
 leave；
 move； 25
 addClass；
 removeClass。
26
$animate服务把这些事件以函数的方式提供，让我们能在自己的指令中处理自定义动画。

27
22.10.1 addClass()

addClass()方法触发了一个基于className变量的自定义动画事件，并且把className值作
28
为CSS类添加到元素上。当在DOM元素上添加样式类时，$animate服务给这个className添加了
一个叫-add的后缀来让我们建立动画。
29

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

addClass()方法带三个参数。
31
 element（jQuery/jqLite元素）
正在建立动画的元素。 32

 className（字符串）
正在建立动画，并且添加到元素上的CSS类。 33

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

angular.module('myApp', ['ngAnimate']) 35
.directive('myDirective', function($animate) {
return {
template: '<div class="myDirective"></div>',
link: function(scope, ele, attrs) { 36