使用AngularJS实现可伸缩的页面切换的方法
AngularJS1.2通过引入基于纯CSSclass的切换和动画，在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view，让我们来看一下，一个引入众多的不同切换的可伸缩方法，以及指定的每个页面如何切入和切出。
演示:http://embed.plnkr.co/PqhvmW/preview
首先，标记：
<divclass="page-container"> <divng-viewclass="page-view"ng-class="pageAnimationClass"></div> </div>既然ng-view使用进入/离开动画，那么就能简单地在DOM里使用两个ng-view元素来进行新视图切入和旧视图切出。因此，我们在使用相对定位的page-container元素里，使用绝对定位建立了ng-view，从而支持任意一种定位切换。
'go'方法
在单页面应用里，我们仍想启用通过URL导航和确保浏览器的回退和下一步按钮如预期的功能。所以一旦我们在$routeProvider设好我们的路由，模板，控制器（可选的解析），我们可以在一个ng-click里使用一个相对路径来直接切换页面：
<ang-click="/page2">Gotopage2</a>
那样也可以工作，但是我们需要在ng-view硬编码指定切换一个class。以此代替，让我们在$rootScope上创建一个'go'方法，可以让我们指定一个路径和一个像这样的切换：
<ang-click="go('/page2','slideLeft')">Gotopage2</a>
这是我们$rootScope'go'方法：
$rootScope.go=function(path,pageAnimationClass){
if(typeof(pageAnimationClass)==='undefined'){//Useadefault,yourchoice
$rootScope.pageAnimationClass='crossFade';
}
else{//Usethespecifiedanimation
$rootScope.pageAnimationClass=pageAnimationClass;
}
if(path==='back'){//Allowa'back'keywordtogotopreviouspage
$window.history.back();
}
else{//Gotothespecifiedpath
$location.path(path);
}
};
现在，任何你第二个参数指定的切换类将会添加到ng-view并且go方法将会用指定的第一个参数改变页面路径。
切换类
接下来要做的就是创建一个任意数量的切换类，并使用ngAnimatemodule提供的钩子，例如：
/*slideLeft*/
.slideLeft{
transition-timing-function:ease;
transition-duration:250ms;
}
.slideLeft.ng-enter{
transition-property:none;
transform:translate3d(100%,0,0);
}
.slideLeft.ng-enter.ng-enter-active{
transition-property:all;
transform:translate3d(0,0,0);
}
.slideLeft.ng-leave{
transition-property:all;
transform:translate3d(0,0,0);
}
.slideLeft.ng-leave.ng-leave-active{
transition-property:all;
transform:translate3d(-100%,0,0);
}