Page 326 - AngularJS权威教程

306 第 22 章 Angular 动画

设置了关键帧之后，我们可以简单地把动画附加到ngAnimate添加的CSS样式类上：

.fade-in.ng-enter {
-webkit-animation: 2s fade-in-enter-animation;
animation: 2s fade-in-enter-animation;
}
.fade-in.ng-leave {
-webkit-animation: 2s fade-in-leave-animation;
animation: 2s fade-in-leave-animation;
}

3. JavaScript动画
当用JavaScript做动画时，需要在动画的描述对象上定义enter和leave属性。

angular.module('myApp', ['ngAnimate'])
.animation('.fade-in', function() {
return {
enter: function(element, done) {
// 不使用jQuery的原始动画
// 用jQuery会简单很多
var op = 0, timeout,
animateFn = function() {
op += 10;
element.css('opacity', op/100);
if (op >= 100) {
clearInterval(timeout);
done();
}
};

// 把初始透明度设为0
element.css('opacity', 0);
timeout = setInterval(animateFn, 100);
},
leave: function(element, done) {
var op = 100,
timeout,
animateFn = function() {
op-=10;
element.css('opacity', op/100);
if (op <= 0) {
clearInterval(timeout);
done();
}
};
element.css('opacity', 100);
timeout = setInterval(animateFn, 100);
}
}
});

22.9.2 ngView动画

ngView指令触发这些事件：

动 作 事件名称
新的视图内容准备好了 enter
正在离开，已有的内容将被隐藏 leave