Page 333 - AngularJS权威教程

22.9 内置指令的动画 313

<div ng-init="show=false" 19
ng-controller="HomeController">
<button ng-click="show=!show">Show</button>
<div ng-if="show" class="animateNgIf">
<h2>Show me</h2> 20
</div>
</div>
21
1. CSS3过渡
要让ngIf中的元素动起来，我们需要确认添加了展现元素初始状态的CSS样式类，以及为
enter和edit状态定义最终状态的类： 22

.animateNgIf.ng-enter,
.animateNgIf.ng-leave { 23
transition: 2s linear all;
-webkit-transition: 2s linear all;
} 24
至此，可以简单地在动画中定义初始和最终阶段的CSS属性。这里，我们把元素从绿色的文
字淡入，在进入动画的最终阶段把文字变成黑色。在离开（元素移除）动画中，我们把属性反转： 25

.animateNgIf.ng-enter {
opacity: 0;
color: green; 26
}
.animateNgIf.ng-enter.ng-enter-active {
opacity: 1; 27
color: black;
}
.animateNgIf.ng-leave {}
.animateNgIf.ng-leave.ng-leave-active { 28
opacity: 0;
}
29
2. CSS3动画
首先，添加为动画定义的@keyframe：
30
@keyframes animateNgIf-enter {
from {opacity:0;}
to {opacity:1;} 31
}
@-webkit-keyframes animateNgIf-enter {
from {opacity:0;} 32
to {opacity:1;}
}
@keyframes animateNgIf-leave {
from {opacity: 1;} 33
to {opacity: 0;}
}
@-webkit-keyframes animateNgIf-leave { 34
from {opacity: 1;}
to {opacity: 0;}
}
35
为了应用动画，需要做的就是在我们的类中添加动画CSS样式：

.animateNgIf.ng-enter { 36
-webkit-animation: 2s animateNgIf-enter;