Page 323 - AngularJS权威教程

22.7 微调动画 303

所有的主流浏览器都支持JavaScript动画，所以如果想在不支持CSS渐变和动画的浏览器上提 19
供动画的话，这是个好的选择。
这里，我们更新JavaScript来处理动画，而不是操控CSS来让元素动起来。 20

ngAnimate在模块API上添加了.animation方法；这个方法提供了一个接口，我们可以用来
创建动画。 21
animiation()方法带有两个参数。
 classname（字符串） 22

这个classname会匹配要产生动画的元素的class。到现在为止的例子里，这个动画应当被
命名为：.fade-in。 23
 animateFun（函数）
24
animate函数预期会返回一个对象，包含了指令会触发的不同事件函数（当使用的时候）。
想知道这些函数的详细文档，请查阅$animate API文档。
25
angular.module('myApp', ['ngAnimate'])
.animation('.fade-in', function() {
return { 26
enter: function(element, done) {
// 运行动画
// 当动画结束的时候调用done 27
return function(cancelled) {
// 关闭或者取消的回调
}
} 28
}
});
29
$animate服务为指定的元素调用这些函数。在这些函数里，我们可以对这个元素做任何事情。
唯一要求是在动画结束时，需要调用回调函数done()。
30
在这些函数中，我们可以返回一个end函数，它会在动画结束或者动画被取消时调用。
当动画触发时， $animate为事件查找匹配的动画函数。如果找到了匹配事件的函数，它会执
行这个函数，否则就会完全跳过这个动画。 31

22.7 微调动画 32

取决于应用的复杂度，ngAnimate和它下面的动画代码可能会需要一些调整。 33

对CSS类作过滤 34

默认情况下，ngAnimate会自动尝试让每个通过$animate服务传递过来的元素都动起来。但
是不必担心，只有包含了用CSS或者JavaScript动画注册了的CSS类的元素才会真的动起来。 35

尽管这个系统在运作时，必须检查每个可能的CSS类，这可能会在低速设备上慢一些。因此，
在angular.js的1.2.13发布版本中，ngAnimate提供了一个配置项。让$animate提供者可以使用正 36