AngularJS 实现页面切换的一个可伸缩方法 已翻译 100%

oschina 投递于 2014/06/20 13:59 (共 3 段, 翻译完成于 06-21)
阅读 10940
收藏 3
1
加载中

AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出。

演示http://embed.plnkr.co/PqhvmW/preview

首先,标记:

  <div class="page-container">
    <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
  </div>

既然ng-view使用进入/离开动画,那么就能简单地在DOM里使用两个 ng-view 元素来进行新视图切入和旧视图切出。因此,我们在使用相对定位的 page-container 元素里,使用绝对定位建立了ng-view,从而支持任意一种定位切换。

AndyLam
AndyLam
翻译于 2014/06/20 15:13
1

'go' 方法

在单页面应用里,我们仍想启用通过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 = pageAnimationClass;
    }

    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 方法将会用指定的第一个参数改变页面路径。

AndyLam
AndyLam
翻译于 2014/06/20 14:35
1

切换类

接下来要做的就是创建一个任意数量的切换类,并使用 ngAnimate module 提供的钩子,例如:

/* 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);
}
小编辑
小编辑
翻译于 2014/06/20 14:37
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(0)

返回顶部
顶部