使用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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
js格式化时间小结
Nov 03 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 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替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php使用session二维数组实例
2014/11/06 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
Vue实现图书管理案例
2021/01/20 Vue.js
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
南京某公司笔试题
2013/01/27 面试题
大学生党员个人对照检查材料范文
2014/09/25 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
十七岁的单车观后感
2015/06/12 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
转变工作作风心得体会
2016/01/23 职场文书
Python读取和写入Excel数据
2022/04/20 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers