AngularJS实现可伸缩的页面切换
AngularJS实现可伸缩的页面切换
AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出。
首先,标记:
<div class="page-container">
<div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
</div>
'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);
}
AngularJS实现可伸缩的页面切换的更多相关文章
- AngularJS应用页面切换优化方案
葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...
- AngularJs应用页面切换优化方案(转)
目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...
- iOS开发之——从零开始完成页面切换形变动画
前言 某天我接到了UI发给我的两张图: 需求图.png 看到图的时候我一脸懵逼,显然我需要做一个页面切换的指示动画.老实说,从大三暑假开始做iOS开发也一年有余了,但是遇到复杂动画总是唯恐避之不及,只 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- Android中使用ViewPager实现屏幕页面切换和页面切换效果
之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...
- ViewPager之Fragment页面切换
一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...
- html tab页面切换事件。
$(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...
- vue-lazy-render: 延迟渲染大组件,增强页面切换流畅度
最近用element来做项目,在开发的过程中,突然发现页面的操作和切换在数据量大的时候相当卡,后来提了个issue,在furybean解答后才知道,我每个单元格都加了tooltip,会生成大量的节点, ...
- 第54课 Qt 中的多页面切换组件
1. 多页面切换组件(QTabWidget) (1)能够在同一个窗口中自由切换不同页面的内容 (2)是一个容器类型的组件,同时提供友好的页面切换方式 2. QTabWidget的使用方式 (1)在应用 ...
随机推荐
- 51单片机stack堆栈
一般编译器的堆栈用于保存局部变量.函数的参数.函数的返回值.中断上下文信息等.但Keil对局部变量.函数参数预先分配空间(放在静态全局变量区),Keil的堆栈只是用于保存函数嵌套调用的PC.中断上下文 ...
- (七):处理MFC
(一):简单介绍 为了可以在一个Winelib应用中使用MFC,你须要首先使用Winelib又一次编译MFC. 在理论上,你应该为Windows的MFC编写一个封装(怎样编写在后面介绍).可是,在实践 ...
- delphi怎样把子窗体显示在pagecontrol的tabsheet
https://bbs.csdn.net/topics/391980918 unit Unit1; interface uses Winapi.Windows, Winapi.Messages, Sy ...
- 新内容转入github
所有新内容已经转入 https://github.com/honggzb/Study-General https://github.com/honggzb/Study2016
- springboot-async
在项目中,当访问其他人的接口较慢或者做耗时任务时,不想程序一直卡在耗时任务上,想程序能够并行执行, 我们可以使用多线程来并行的处理任务,也可以使用spring提供的异步处理方式@Async. Spri ...
- PXE:终于成功启动 fedora live 了!
default menu.c32 timeout 1 label fedora29-live menu label fedora29-live from ftp kernel fedora29live ...
- eclipse输入中文为繁体字
今天上班在java类中写注释,发现是繁体字,于是切换到文本编辑器,简体字,于是百度发现, 原来是搜狗输入放和eclipse的快捷键ctrl+shift+F冲突,因为使用了eclipse的格式化,结果切 ...
- webapi 统一处理时间格式
public class UnixDateTimeConvertor : DateTimeConverterBase { public override object ReadJson(JsonRea ...
- PHP连接MySQL数据库的三种方式(mysql、mysqli、pdo)
PHP与MySQL的连接有三种API接口,分别是:PHP的MySQL扩展 .PHP的mysqli扩展 .PHP数据对象(PDO) ,下面针对以上三种连接方式做下总结,以备在不同场景下选出最优方案. P ...
- 为IONIC开发的安卓apk签名
首先进入\platforms\android目录生成一个keystore文件: keytool -genkey -alias mykey -keyalg RSA -validity 40000 -ke ...