使用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事件处理程序的几种方式
Jun 27 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
使用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
德生PL330测评
2021/03/02 无线电
2.PHP入门
2006/10/09 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
七一表彰活动方案
2014/01/18 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
高一学生期末评语
2014/04/25 职场文书
公司委托书格式
2014/08/01 职场文书
工作失误检讨书范文
2015/01/26 职场文书
寒假安全保证书
2015/02/28 职场文书
党员自我评价范文2015
2015/03/03 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
放假通知怎么写
2015/08/18 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis