Page 332 - AngularJS权威教程

312 第 22 章 Angular 动画

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

.animateSwitch.ng-enter {
-webkit-animation: 2s animateSwitch-enter;
animation: 2s animateSwitch-enter;
}
.animateSwitch.ng-leave {
-webkit-animation: 2s animateSwitch-leave;
animation: 2s animateSwitch-leave;
}
3. JavaScript动画
当用JavaScript做动画时，需要在动画的描述对象上定义enter和leave属性。

angular.module('myApp', ['ngAnimate'])
.animation('.animateSwitch', 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.5 ngIf动画

ngIf指令触发这些事件：

动 作 事件名称
ngIf的内容变更了，新DOM被插入之后触发 enter
在ngIf的内容被移除之前触发 leave

对于后面的ngIf示例，我们用这段HTML来运行：