Page 330 - AngularJS权威教程

310 第 22 章 Angular 动画

@keyframes animateInclude-enter {
from {opacity:0;}
to {opacity:1; color: green}
}
@-webkit-keyframes animateInclude-enter {
from {opacity:0;}
to {opacity:1; color: green}
}
@keyframes animateInclude-leave {
from {opacity: 1;}
to {opacity: 0; color: black}
}
@-webkit-keyframes animateInclude-leave {
from {opacity: 1;}
to {opacity: 0; color: black}
}
为了应用动画，需要做的就是在我们的类中添加动画CSS样式：
.animateInclude.ng-enter {
-webkit-animation: 2s animateInclude-enter;
animation: 2s animateInclude-enter;
}
.animateInclude.ng-leave {
-webkit-animation: 2s animateInclude-leave;
animation: 2s animateInclude-leave;
}
3. JavaScript动画

当用JavaScript做动画时，需要在动画的描述对象上定义enter和leave属性。
angular.module('myApp', ['ngAnimate'])
.animation('.animateInclude', 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.4 ngSwitch动画

ngSwitch指令触发这些事件：
动 作 事件名称
新的视图内容准备好了 enter
正在离开，已有的内容将被隐藏 leave