Page 320 - AngularJS权威教程
P. 320
300 第 22 章 Angular 动画
}
.fade-in.ng-enter.ng-enter-active {
opacity: 1;
}
.fade-in.ng-leave {
opacity: 1;
}
.fade-in.ng-leave.ng-leave-active {
opacity: 0;
}
22.4 使用 CSS3 动画
CSS3动画比CSS3过渡更广泛、更复杂。除IE9和更早版本的IE之外,所有主流浏览器都支持
它 们 。使用 CSS3 动画,我 们 会用同 样 的初始 样 式类 ng-[EVENT] ,但是 不需要在
ng-[EVENT]-active状态中定义动画状态,因为CSS规则会处理剩余部分。
我们在@keyframes规则中创建动画。在@keyframes规则中定义的CSS元素内部,我们定义要
处理的CSS样式。
想让DOM元素动起来时,我们使用animation:属性来绑定@keyframe CSS属性,它把动画
添加到CSS元素上。
当在CSS元素上绑定动画时,我们需要同时指定动画的名称和持续时间。
记得添加动画持续时间:如果我们忘记添加动画的持续时间,它默认会设成0,
此时动画就不会运行了。
要创建@keyframes规则,我们需要给关键帧一个名字,并且设置动画的时间阶段,它包含
了动画过程中的属性。
@keyframes firstAnimation {
0% {
color: yellow;
}
100% {
color: black;
}
}
/*对于Chrome和Safari浏览器 */
@-webkit-keyframes firstAnimation {
/* from等于0% */
from {
color: yellow;
}
/* from等于100% */
to {
color: black;
}
}