Page 327 - AngularJS权威教程

22.9 内置指令的动画 307

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

<a href="#/">Home</a>
<a href="#/two">Second view</a>
<a href="#/three">Third view</a> 20
<div class="animateView" ng-view></div>

当跟ng-view指令协作时，我们是在跟Angular内部的路由打交道。有关路由的更多信息，请 21
参阅第12章。Angular路由的下载地址是：http://code.angularjs.org/1.2.13/angular-route.js。

对于下面的示例，可以把路由设置为： 22

angular.module('myApp', ['ngAnimate', 'ngRoute'])
.config(function($routeProvider) { 23
$routeProvider.when('/', {
template: '<h2>One</h2>'
}).when('/two', {
template: '<h2>Two</h2>' 24
}).when('/three', {
template: '<h2>Three</h2>'
}); 25
})
示例中的三个路由，每个显示了一个不同的视图。
26
1. CSS3过渡
要让ngView列表中的元素动起来，我们需要确认添加了展现元素初始状态的CSS样式类，以 27
及为enter和edit状态定义最终状态的类：

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

.animateView.ng-enter {
opacity: 0; 31
color: green;
}
.animateView.ng-enter.ng-enter-active {
opacity: 1; 32
color: black;
}
.animateView.ng-leave {} 33
.animateView.ng-leave.ng-leave-active {
opacity: 0;
}
34
2. CSS3关键帧动画
首先，添加我们为动画定义的@keyframe： 35

@keyframes animateView-enter {
from {opacity:0;} 36
to {opacity:1;}