cordova原生页面切换效果插件的使用:com.telerik.plugins.nativepagetransitions
1. 添加插件:cordova plugin add com.telerik.plugins.nativepagetransitions
2. 使用方法:
在index.html中添加:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// then override any default you want
window.plugins.nativepagetransitions.globalOptions.duration = 500;
window.plugins.nativepagetransitions.globalOptions.iosdelay = 350;
window.plugins.nativepagetransitions.globalOptions.androiddelay = 350;
window.plugins.nativepagetransitions.globalOptions.winphonedelay = 350;
window.plugins.nativepagetransitions.globalOptions.slowdownfactor = 4;
// these are used for slide left/right only currently
window.plugins.nativepagetransitions.globalOptions.fixedPixelsTop = 0;
window.plugins.nativepagetransitions.globalOptions.fixedPixelsBottom = 0;
});
});
$state.go('view', {movieid: id});
window.plugins.nativepagetransitions.slide(
{"direction":"up"},
function (msg) {console.log("success: " + msg)}, // called when the animation has finished
function (msg) {alert("error: " + msg)} // called in case you pass in weird values
);
3. 取消默认的动画:
$ionicConfigProvider.views.transition('no');
4. 如果不希望哪个页面有动画也可以禁用某个页面的动画效果:
.state('tab.message', {
url: '/message',
nativeTransitions: null,
cache:false,
views: {
'tab-message': {
templateUrl: 'templates/tab-message.html',
resolve: load([
'js/services/commonusefunction/messagesFactory.js',
'js/controllers/messageController.js',
'js/services/public/ionicModalService.js'
])
}
}
})
5. 设置点击进入某个页面时候的动画:
.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setDefaultBackTransition({
type: 'slide',
direction: 'right'
});
});
6. 您还可以根据这样的设备定义不同的转换(向后和向前):
.state('home', {
url: '/home',
nativeTransitionsAndroid: {
"type": "flip",
"direction": "right"
},
nativeTransitionsIOS: {
"type": "flip",
"direction": "left"
},
nativeTransitionsWindowsPhone: {
"type": "flip",
"direction": "down"
},
nativeTransitionsBackAndroid: {
"type": "flip",
"direction": "left"
},
nativeTransitionsBackIOS: {
"type": "flip",
"direction": "right"
},
nativeTransitionsBackWindowsPhone: {
"type": "flip",
"direction": "up"
},
templateUrl: "templates/home.html"
})
cordova原生页面切换效果插件的使用:com.telerik.plugins.nativepagetransitions的更多相关文章
- ionic-native-transitions调用原生页面切换实现ionic路由切换
废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic ...
- html5各种页面切换效果和模态对话框
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )
1.页面切换(data-transition)
- Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...
- Android - TabHost 与 Fragment 制作页面切换效果
Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...
- 100种不同图片切换效果插件pageSwitch
分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览 源码下载 实现的代码. ht ...
- 基于jQuery图像碎片切换效果插件FragmentFly
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览 源码下载 部分代码: <div class="all_ ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
随机推荐
- MFC窗口风格 WS_style/WS_EX_style
窗口风格(Window style) WS_BORDER 有边框窗口 WS_CAPTION 必须和WS_BORDER风格配合,但不能与WS_DLGFRAME风格一起使用.指示窗口包含标题要部分 ...
- Linux相关问题总结
1.linux没有ifconfig命令 可以使用以下命令查询ip地址: ip addr show ifconfig命令在net-tools工具里,安装命令: yum install net-tools
- js datagrid 移动去重
function dataLeft(){ var checkedData = $(listTemplate_right).datagrid('getChecked'); var rows = $(li ...
- pseudo-class与pseudo-element的不同点与相同点
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- java基础知识—循环结构
1.while 循环 语法: while(循环操作){ 循环操作: } 特点:先判断,再执行:2. == : 用于数字比较 比较的是地址 equals: 用于字符串比较 比较的是字符 3.do-whi ...
- blender 3d模型软件介绍(开源,免费,易用,强大)
关于BLENDER Blender是一个开源的多平台轻量级全能三维动画制作软件 具有建模,雕刻,绑定,粒子,动力学,动画,交互,材质,渲染,音频处理,视频剪辑以及运动跟踪,后期合成等等的一系列动画短片 ...
- Codeforces Round #162 (Div. 1) B. Good Sequences (dp+分解素数)
题目:http://codeforces.com/problemset/problem/264/B 题意:给你一个递增序列,然后找出满足两点要求的最长子序列 第一点是a[i]>a[i-1] 第二 ...
- 区间dp之四边形不等式优化详解及证明
看了那么久的四边形不等式优化的原理,今天终于要写一篇关于它的证明了. 在平时的做题中,我们会遇到这样的区间dp问题 它的状态转移方程形式一般为dp[i][j]=min(dp[i][k]+dp[k+1] ...
- IP通信基础课堂笔记----第二章(重点)
TCP报文及传输 TCP报文主要学习的内容包括,报文格式.连接管理.流量控制.差错控制. TCP报文是由报文头部和数据两个部分组成.占20字节的报文头部包括源端口.位目的端口.序号..确认号.首部长度 ...
- Maven Gradle
场景:随着项目越来越规范,对构建工具的要求越来越高,我们从Maven转到了Gradle. 转自:http://www.infoq.com/cn/news/2011/04/xxb-maven-6-gra ...