Page 328 - AngularJS权威教程

308 第 22 章 Angular 动画

}
@-webkit-keyframes animateView-enter {
from {opacity:0;}
to {opacity:1;}
}
@keyframes animateView-leave {
from {opacity: 1;}
to {opacity: 0;}
}
@-webkit-keyframes animateView-leave {
from {opacity: 1;}
to {opacity: 0;}
}

为了应用动画，需要做的就是在我们的类中添加动画CSS样式：
.animateView.ng-enter {
-webkit-animation: 2s animateView-enter;
animation: 2s animateView-enter;
}
.animateView.ng-leave {
-webkit-animation: 2s animateView-leave;
animation: 2s animateView-leave;
}
3. JavaScript动画
首先，我们需要下载 并且在文档的头部包含jQuery。
①
当用JavaScript做动画时，需要在动画的描述对象上定义enter和leave属性。
angular.module('myApp', ['ngAnimate'])
.animation('.animateView', function() {
return {
enter: function(element, done) {
// 显示如何用jQuery实现动画的例子
// 注意，这需要在HTML中包含jQuery
$(element).css({
opacity: 0
});
$(element).animate({
opacity: 1
}, done);
},
leave: function(element, done) {
done();
}
}
});

22.9.3 ngInclude动画

ngInclude指令触发这些事件：
动 作 事件名称
新的视图内容准备好了 enter
正在离开，已有的内容将被隐藏 leave
——————————
① http://jquery.com/download/