AngularJS 实现页面切换的一个可伸缩方法 - 开源中国社区
AngularJS 实现页面切换的一个可伸缩方法
英文原文：
With the introduction of pure CSS class-based transitions and animations in&AngularJS 1.2, it's become much easier to create interesting page-to-page transitions in a single page app. Using only one ng-view, let's look at a scalable approach to including an arbitrary number of different transitions and allow each page to specify how it transitions in and out.
First, the markup:
&&&div&class=&page-container&&
&&&&&div&ng-view&class=&page-view&&ng-class=&pageAnimationClass&&&&/div&
Since ng-view uses enter/leave animations, there will briefly be two ng-view elements in the DOM while the new view transitions in and the old view transitions out. So, we set up the ng-view with absolute positioning inside a page-container element with relative positioning to allow for any kind of positioning transition.
AngularJS 1.2&通过引入基于纯CSS class的切换和动画，在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view，让我们来看一下，一个引入众多的不同切换的可伸缩方法，以及指定的每个页面如何切入和切出。
首先，标记：
&&&div&class=&page-container&&
&&&&&div&ng-view&class=&page-view&&ng-class=&pageAnimationClass&&&&/div&
既然ng-view使用进入/离开动画，那么就能简单地在DOM里使用两个 ng-view 元素来进行新视图切入和旧视图切出。因此，我们在使用相对定位的 page-container 元素里，使用绝对定位建立了ng-view，从而支持任意一种定位切换。
The 'go' method
In a single page app, we still want to enable navigation by URL and make sure the browser's back and forward buttons function as expected. So once we've set up our routes, templates, controllers (and optionally, resolves) in the $routeProvider, we can use a relative path in an ng-click directive to switch pages:
&&&a&ng-click=&/page2&&Go&to&page&2&/a&
That works but we'd have to hard-code a class on the ng-view to specify the transition. Instead, let's create a 'go' method on $rootScope that will allow us to specify a path and a transition like this:
&&&a&ng-click=&go('/page2',&'slideLeft')&&Go&to&page&2&/a&
Here's our $rootScope 'go' method:
$rootScope.go&=&function&(path,&pageAnimationClass)&{
&&&&if&(typeof(pageAnimationClass)&===&'undefined')&{&//&Use&a&default,&your&choice
&&&&&&&&$rootScope.pageAnimationClass&=&'crossFade';
&&&&else&{&//&Use&the&specified&animation
&&&&&&&&$rootScope.pageAnimationClass&=&pageAnimationC
&&&&if&(path&===&'back')&{&//&Allow&a&'back'&keyword&to&go&to&previous&page
&&&&&&&&$window.history.back();
&&&&else&{&//&Go&to&the&specified&path
&&&&&&&&$location.path(path);
Now, whatever transition class you specify in the second argument will be added to the ng-view(s) and the go method will change to the page path specified in the first argument.
在单页面应用里，我们仍想启用通过URL导航和确保浏览器的回退和下一步按钮如预期的功能。所以一旦我们在$routeProvider设好我们的路由，模板，控制器（可选的解析），我们可以在一个&ng-click 里使用一个相对路径来直接切换页面：
&&&a&ng-click=&/page2&&Go&to&page&2&/a&
那样也可以工作，但是我们需要在ng-view 硬编码指定切换一个class 。以此代替，让我们在 $rootScope 上创建一个&'go' 方法，可以让我们指定一个路径和一个像这样的切换：
&&&a&ng-click=&go('/page2',&'slideLeft')&&Go&to&page&2&/a&
这是我们 $rootScope 'go' 方法：
$rootScope.go&=&function&(path,&pageAnimationClass)&{
&&&&if&(typeof(pageAnimationClass)&===&'undefined')&{&//&Use&a&default,&your&choice
&&&&&&&&$rootScope.pageAnimationClass&=&'crossFade';
&&&&else&{&//&Use&the&specified&animation
&&&&&&&&$rootScope.pageAnimationClass&=&pageAnimationC
&&&&if&(path&===&'back')&{&//&Allow&a&'back'&keyword&to&go&to&previous&page
&&&&&&&&$window.history.back();
&&&&else&{&//&Go&to&the&specified&path
&&&&&&&&$location.path(path);
现在，任何你第二个参数指定的&切换类 将会添加到 ng-view 并且&go 方法将会用指定的第一个参数改变页面路径。
Transition Classes
All that's left to do is create an arbitrary number of transition classes using the hooks provided by the . For example:
/*&slideLeft&*/
.slideLeft&{
&&&&transition-timing-function:&
&&&&transition-duration:&250
.slideLeft.ng-enter&{
&&&&transition-property:&
&&&&transform:&translate3d(100%,0,0);
.slideLeft.ng-enter.ng-enter-active&{
&&&&transition-property:&
&&&&transform:&translate3d(0,0,0);
.slideLeft.ng-leave&{
&&&&transition-property:&
&&&&transform:&translate3d(0,0,0);
.slideLeft.ng-leave.ng-leave-active&{
&&&&transition-property:&
&&&&transform:&translate3d(-100%,0,0);
其它翻译版本：1(点击译者名切换)
接下来要做的就是创建一个任意数量的切换类，并使用&&提供的钩子，例如：
/*&slideLeft&*/
.slideLeft&{
&&&&transition-timing-function:&
&&&&transition-duration:&250
.slideLeft.ng-enter&{
&&&&transition-property:&
&&&&transform:&translate3d(100%,0,0);
.slideLeft.ng-enter.ng-enter-active&{
&&&&transition-property:&
&&&&transform:&translate3d(0,0,0);
.slideLeft.ng-leave&{
&&&&transition-property:&
&&&&transform:&translate3d(0,0,0);
.slideLeft.ng-leave.ng-leave-active&{
&&&&transition-property:&
&&&&transform:&translate3d(-100%,0,0);　　鉴于这帖蛮多人看的，我解释一下不能切换的原因：　　1.没有aero特效，或禁用aero的，无法实现3D切换(普通家庭版没aero功能)　　2.桌面主题若选择&基本和高对比主题&，也将自动禁用aero。　　还有，本方法绿色健康，无副作用　　一.使用快捷键　　按住win(Ctrl键旁边)+Tab,再按一次Tab即可切换,或者用鼠标滚轮切换　　二.使用快捷方式(以前深度论坛看到的，在某种情况下挺实用的)　　1，在桌面中单击右键新建一个&快捷方式&　　2，在&请键入项目的位置&中输入　　C:Windowssystem32rundll32.exe DwmApi #105　　然后点下一步　　3，在&键入该快捷方式的名称&中输入&3D窗口切换&点击&完成&　　4、在该快捷图标上右键-属性-更改图标-在该文件夹中查找图标中输入%SystemRoot%System32imageres.dll　　或者%SystemRoot%system32SHELL32.dll　　然后回车或者点击下面空白处,会出现图标,选择自己喜欢的图标即可 　　5，拖拉该快捷方式将其锁定到任务栏中，现在只要点击该快捷方式就可以重现3D窗口切换画面了。　　三.用写入注册表的方式,在右键菜单中切换(比起前面两种方法,这方法显得有点鸡肋..)　　1.下载此处的解压包给大家发一个桌面右键3D窗口转换程序　　2.运行里面的注册表即可在右键菜单中生成&窗口转换程序&
欢迎转载：
推荐： 　　　让win7实现3D切换页面效果的3种方法_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
让win7实现3D切换页面效果的3种方法
上传于|0|0|文档简介
&&windows系统知识
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢