Page 331 - AngularJS权威教程

22.9 内置指令的动画 311

ngSwitch指令类似于前面的例子。对于这些例子，我们用下面使用了ng-switch指令的HTML 19
来运行：

<div ng-init="template='home'" 20
ng-controller="HomeController">
<button ng-click="template='home'">Home</button>
<button ng-click="template='second'">Second</button>
<button ng-click="template='third'">Third</button> 21
<div ng-switch="template">
<div class="animateSwitch"
ng-switch-when="home"> 22
<h1>Home</h1>
</div>
<div class="animateSwitch" 23
ng-switch-when="second">
<h1>Second</h1>
</div>
<div class="animateSwitch" 24
ng-switch-when="third">
<h1>Home</h1>
</div> 25
</div>
</div>

1. CSS3过渡 26
要让ngSwitch列表中的元素动起来，我们需要确认添加了展现元素初始状态的CSS样式类，
以及为enter和edit状态定义最终状态的类： 27

.animateSwitch.ng-enter,
.animateSwitch.ng-leave { 28
transition: 2s linear all;
-webkit-transition: 2s linear all;
}
29
至此，可以简单地在动画中定义初始和最终阶段的CSS属性。这里，我们把元素从绿色的
文字淡入，在进入动画的最终阶段把文字变成黑色。在离开（元素移除）动画中，我们把属性
反转： 30
.animateSwitch.ng-enter {
opacity: 0; 31
color: green;
}
.animateSwitch.ng-enter.ng-enter-active { 32
opacity: 1;
color: black;
} 33
.animateSwitch.ng-leave {}
.animateSwitch.ng-leave.ng-leave-active {
opacity: 0;
} 34
2. CSS3动画

首先，添加为动画定义的@keyframe： 35
@keyframes animateSwitch-enter {
from {opacity:0;} 36
to {opacity:1; color: green}