使用AngularJS实现可伸缩的页面切换的方法


Posted in Javascript onJune 19, 2015

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,从而支持任意一种定位切换。

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

切换类

接下来要做的就是创建一个任意数量的切换类,并使用 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);
}

Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
flexigrid 参数说明
Nov 23 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
Vue render深入开发讲解
Apr 13 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
使用AngularJS实现表单向导的方法
Jun 19 #Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 #Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 #Javascript
Backbone.js的Hello World程序实例
Jun 19 #Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
JQuery之focus函数使用介绍
2013/08/20 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
js实现简易计算器功能
2019/10/18 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python 实现按对象传值
2019/12/26 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python持续监听文件变化代码实例
2020/07/22 Python
Python 合并拼接字符串的方法
2020/07/28 Python
经典演讲稿范文
2013/12/30 职场文书
审计主管岗位职责
2014/01/31 职场文书
药品采购员岗位职责
2014/02/08 职场文书
英文求职信写作小建议
2014/02/16 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
另类冲刺标语
2014/06/24 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
2014年团队工作总结
2014/11/24 职场文书
Pandas数据类型之category的用法
2021/06/28 Python