Page 338 - AngularJS权威教程

318 第 22 章 Angular 动画

-webkit-animation: 2s animateMe-remove;
animation: 2s animateMe-remove;
display: block !important;
}
3. JavaScript动画
当用JavaScript做动画时，需要在动画的描述对象上定义addClass和removeClass属性。

angular.module('myApp', ['ngAnimate'])
.animation('.animateMe', function() {
return {
addClass: function(ele, clsName, done)
{
// 显示如何用jQuery实现动画的例子
// 注意，这需要在HTML中包含jQuery
if (clsName === 'ng-hide') {
$(ele).animate({
'opacity': 0
}, 2000, done);
} else { done(); }
},
removeClass: function(ele, clsName, done)
{
if (clsName === 'ng-hide') {
$(ele).css('opacity', 0);
// 强制移除ng-hide类
// 这样
// 我们就可以真的把动画显示出来
$(ele).removeClass('ng-hide');
$(ele).animate({
'opacity': 1
}, 2000, done);
} else { done(); }
}
}
});

22.10 创建自定义动画

$animate服务给我们在指令中实现自定义动画提供了帮助。把$animate服务注入到我们自
己的应用中之后，可以用暴露出的事件为每个事件触发$animate对象上的关联函数。
要在我们自己的指令中开始动画，需要注入$animate服务。

angular.module('myApp', ['ngAnimate'])
.directive('myDirective', function($animate) {
return {
template: '<div class="myDirective"></div>',
link: function(scope, ele, attrs) {
// 在这里添加动画
// 例如：
$animate['addClass'](element, 'ng-hide');
}
}
});
至此，就可以把事件绑定到指令上，开始显示我们的动画了。