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 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
随机推荐
- java_jsp和servlet中乱码问题
- Android : Camera之camx hal架构
一.camx的代码结构 目前主流的机型都使用camx架构,这个架构和之前架构的主要区别就是 芯片接口层的代码从hardware/qcom 迁移到 vendor/qcom/proprietary/下面, ...
- Spark Streaming的容错和数据无丢失机制
spark是迭代式的内存计算框架,具有很好的高可用性.sparkStreaming作为其模块之一,常被用于进行实时的流式计算.实时的流式处理系统必须是7*24运行的,同时可以从各种各样的系统错误中恢复 ...
- Android四大组件之Service --- 服务的生命周期
一旦在项目的任何位置调用了Context的startService() 方法,相应的服务就会启动起来,并回调onStartCommand() 方法.如果这个服务之前还没有创建过,onCreate() ...
- Docker install GitLab
示范一下如何透过Docker安装GitLab,也顺便将一些常用的东西纪录一下 作业系统: CentOS 7 安装Docker CE 1. 先移除系统上预先安装的Docker旧版本 yum remove ...
- Java并发知识分享
volatile的内存语义 从JSR-133(即从JDK1.5开始),volatile变量的写-读可以实现线程之间的通信 当写一个volatile变量时,JMM会把该线程对应的本地内存中的共享变量值刷 ...
- 微信小程序 - app.json配置解析
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/login ...
- easyui-tree-url-param
远古写法 url后面加参数?param1=1¶m2=2 动态添加 onBeforeLoad: function (node, param) { param.param1= 1, par ...
- call,apply,bind 方法的学习
这是三个常用的操作函数的方法,在js中函数就是一等公民,所以说掌握这三个方法还是有必要的 call 和 apply,都会绑定函数的上下文(context)并立即执行调用该方法函数,两者区别在于,接受的 ...
- mac系统访问windows共享文件夹
1. 打开finder 2. 找到前往 - 连接服务器 3. 打开后,输入smb://ip地址 点击连接 4. 选择共享文件夹 5. 点击好,之后就可以了,如下图