Page 329 - AngularJS权威教程

22.9 内置指令的动画 309

对这三个例子，我们使用下面这个HTML来运行： 19

<div ng-init="template.url='/home.html'"
ng-controller="HomeController">
<button ng-click="template.url='/home.html'"> 20
Home
</button>
<button ng-click="template.url='/second.html'"> 21
Second
</button>
<button ng-click="template.url='/third.html'">
Third 22
</button>
<div class="animateInclude"
ng-include="template.url"> 23
</div>
</div>
我们也在页面中包含内联模板（为了演示），也可以把这些视图设置为从远程服务器获取。 24

<script type="text/ng-template" id="/home.html">
Home Template 25
</script>
<script type="text/ng-template" id="/second.html">
Second Template
</script> 26
<script type="text/ng-template" id="/third.html">
Third Template
</script> 27
1. CSS3过渡
要让ngInclude列表中的元素动起来，我们需要确认添加了展现元素初始状态的CSS样式类， 28
以及为enter和edit状态定义最终状态的类：
29
.animateInclude.ng-enter,
.animateInclude.ng-leave {
transition: 2s linear all;
-webkit-transition: 2s linear all; 30
}
至此，可以简单地在动画中定义初始和最终阶段的CSS属性。这里，我们把元素从绿色的文
字淡入，在进入动画的最终阶段把文字变成黑色。在离开（元素移除）动画中，我们把属性反转： 31

.animateInclude.ng-enter {
opacity: 0; 32
color: green;
}
.animateInclude.ng-enter.ng-enter-active { 33
opacity: 1;
color: black;
} 34
.animateInclude.ng-leave {}
.animateInclude.ng-leave.ng-leave-active {
opacity: 0;
} 35

2. CSS3动画
首先，添加为动画定义的@keyframe： 36