使用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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
中止javascript执行的方法
Feb 14 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
js仿微博动态栏功能
Feb 22 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
vue2.0 循环遍历加载不同图片的方法
Mar 06 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
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
浅谈Python 函数式编程
2020/06/20 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
教师自我评价范例
2013/09/24 职场文书
个性婚礼策划方案
2014/05/17 职场文书
校园绿化美化方案
2014/06/08 职场文书
应聘会计求职信
2014/06/11 职场文书
2014年党员整改措施
2014/10/24 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
怎样写离婚协议书
2015/01/26 职场文书