应用AngularJS完成可伸缩的页面切换的办法

发布时间:2017-03-22 09:50 来源:互联网 以后栏目:电脑基本知识

  这篇文章重要简介了应用AngularJS完成可伸缩的页面切换的办法,AngularJS是一款热点的JavaScript库,须要的同伙可以参考下

  AngularJS 1.2 经过过程引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得加倍的轻易。只须要应用一个ng-view,让我们来看一下,一个引入浩大的不合切换的可伸缩办法,和指定的每个页面若何切入和切出。

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

  起首,标记:

? 1 2 3 <div class="page-container"> <div ng-view class="page-view" ng-class="pageAnimationClass"> </div> </div> 既然ng-view应用进入/分开动画,那么就可以简单地在DOM里应用两个 ng-view 元历来停止新视图切入和旧视图切出。是以,我们在应用相对定位的 page-container 元素里,应用相对定位建立了ng-view,从而支撑随便任性一种定位切换。

'go' 办法

在单页面应用里,我们仍想启用经过过程URL导航和确保浏览器的回退和下一步按钮如预期的功能。所以一旦我们在$routeProvider设好我们的路由,模板,控制器(可选的解析),我们可以在一个 ng-click 里应用一个相对途径来直接切换页面:

? 1 <a ng-click="/page2">Go to page 2</a>

那样也能够任务,然则我们须要在ng-view 硬编码指定切换一个class 。以此代替,让我们在 $rootScope 上创建一个 'go' 办法,可让我们指定一个途径和一个像如许的切换:

? 1 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>

这是我们 $rootScope 'go' 办法:

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $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 办法将会用指定的第一个参数改变页面途径。

切换类

接上去要做的就是创建一个随便任性数量的切换类,并应用 ngAnimate module 供给的钩子,例如:

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /* 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); }
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、