视图，动画
单页应用（Single Page Web Application）往往有一个基本的要点，那就是把多个视图集成到一个网页内，然后去控制这些视图的显示和隐藏。此外，视图的切换动作几乎都会引入动画效果，以获得更平滑、流畅的浏览体验。
如果想要很快速地制作出包含视图动画的单页应用？
Angular会是一个不错的选择。下面，本文将说明如何用Angular（v1.4.3）来完成制作。你也许会觉得这个过程相当简单。
切换DOM的ngSwitch
视图切换，其实就是切换DOM显示。Angular有一个ngSwtich，从名字就可以看出，正是拿来做“切换”工作的。
参考Angular的ngSwitch用法，可以想到这样的html：
<body ng-app="morin" ng-strict-di>
<div class="view-container" ng-controller="viewController as view" ng-switch="view.current">
<div class="view-page view-1" ng-switch-when="1"></div>
<div class="view-page view-2" ng-switch-when="2"></div>
</div>
<!-- scripts -->
</body>
在这段代码中，div.view-page分别代表不同的视图，它们都被包含在div.view-container这样一个视图容器中。视图容器元素上创建了名为viewController的Controller，并定义了关联名view（或者叫简称）。
视图容器上的ng-switch，指定了一个变量view.current，用来判断当前显示哪个视图。对应的，在已有的两个视图内，分别用ng-swtich-when指定了1和2这样的值。想一想JavaScript的switch语句，这个结构会是怎样的效果，就很好理解了。
这些视图对应的css是：
.view-page{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.view-1{
background: #b3c589;
}
.view-2{
background: #8fc241;
}
这里的background是给每个视图带上背景，用作标识。
引入动画的ngAnimate
ngAnimate是Angular的一个附属module，可以为Angular应用增加动画支持。在加入ngAnimate后，ngSwitch的切换过程所涉及的两个元素，会分别被Angular添加不同的class。其中，ng-enter代表进场，ng-enter-active代表进场动画终点，ng-leave代表退场，ng-leave-active代表退场动画终点。只需要借助这些class，我们就可以用css创建切换过程的动画（浏览器私有前缀已省略）：
.view-page.ng-enter{
transition: transform .5s;
transform: translateX(100%);
}
.view-page.ng-enter.ng-enter-active{
transform: translateX(0);
}
.view-page.ng-leave{
transition: transform .5s;
}
.view-page.ng-leave.ng-leave-active{
transform: translateX(-100%);
}
这段代码是一个使用transition制作了简单的平移动画的例子。其中每一段定义都有的.view-page，是为了限定只有视图元素才获得这个动画效果。
transition动画的要点是，transition属性本身必须定义在ng-enter或ng-leave这样表示动画起点的class上。然后，动画终点class上再定义终点样式。
如果使用animation的css动画，则只需要用到动画起点的class：
.view-page.ng-enter{
animation: moveFromRight .5s both;
}
.view-page.ng-leave{
animation: moveToLeft .5s both;
}
@keyframes moveFromRight{
from { transform: translateX(100%); }
}
@keyframes moveToLeft{
to { transform: translateX(-100%); }
}
这段使用animation的代码将可以获得和前面相同的动画效果。
如果想要视图1和视图2各自有不同的进场和退场动画，用class去限定即可：
.view-1.ng-enter{ }
.view-2.ng-enter{ }
/* ... */
有关更多的视图切换动画，推荐参考A Collection of Page Transitions。
让一切工作起来
下面加入JavaScript完成功能。代码是（外层包装函数已省略）：
angular
.module("morin", ["ngAnimate"])
.controller("viewController", viewController);
function viewController(){
var view = this;
view.current = "1";
// Here, change "view.current" to switch views with animation.
}
没错，只需要这样一小段。然后，在viewController函数的代码范围内，只要更改view.current这一个变量的值，就可以完成带动画效果的视图切换。
很方便？现在，视图1内有一个按钮元素，我们希望它点击后切换到视图2，那么这样做就搞定了：
<a class="m-btn" href="javascript:" ng-click="view.current='2'"></a>
如果除了切换，还要做点别的，一般这样做：
<a class="m-btn" href="javascript:" ng-click="view.doSomething()"></a>
对应JavaScript：
function viewController(){
// ... (the same as before)
view.doSomething = doSomething;
function doSomething(){
// Do what you want.
view.current = "2";
}
}
至此，带有视图切换动画的单页应用就完成了。完成后的效果可能像这样（点击切换，限支持的浏览器）：
http://runjs.cn/detail/ntrenbml
它包括4个视图，每个视图都定义了不同的进场和退场动画。
补充说明
ngSwitch的判定值是字符串
使用ngSwitch需要注意的是，最初在html内用ng-switch-when指定的值，只会被当做字符串进行识别。所以你也可以看到前文中的代码使用的是字符串的"1"。
ngSwitch会移除DOM
ngSwtich切换DOM显示并不通过css的display属性实现，而是真正从DOM中添加和移除元素。因此，如果视图元素中有子Controller，使用$scope.$emit()可以发布事件到上层，如viewController的$scope，但反过来，viewController使用$scope.$broadcast()向下发布事件，则可能会因为DOM当前不存在而接收不到。
保障初始状态的ngCloak
JavaScript代码一般都会放在比较靠后的位置执行，在代码未运行完毕之前，可能会出现先看到未经JavaScript处理的html的情况（并带来一种闪烁的感觉）。比如本文例子中，ngSwitch中的多个视图初始都是显示的，只是在JavaScript代码运行后才隐藏非当前视图。
Angular提供了ngCloak来解决这个问题。在本文例子中，可以在div.view-container上添加自定义属性ng-cloak，并在页面css内补充这样的样式：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
也就是说，先隐藏，然后Angular会在加载完成后再移除ngCloak标记。
浏览器兼容性
考虑Angular(v1.4.x)本身以及css动画的兼容性，需要IE10+及其他现代浏览器。如果是移动端应用，那么在当前主流手机浏览器上都是可用的。
等下，还完全不会Angular...
本文假定你已经了解了最基本的Angular用法。如果想要从零开始，推荐参考AngularJS for Absolute Beginners和AngularJS TodoMVC Example。
结语
说起来，我也赞同一个观点是，Angular的学习成本不低。但就本文的例子来看，要制作这样一个像模像样的单页应用，是不是还挺简单的呢？对Angular有基本的了解就可以了。
当然，本文才不是说因为一个功能点的实现，就应该去引入Angular这样的框架。请理解为，如果用Angular开发单页应用，至少它的视图切换动画会很容易做！
（重新编辑自我的博客，原文地址：http://acgtofe.com/posts/2015/08/view-transitions-with-angularjs）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。