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 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
随机推荐
- leetcode日记 HouseRobber I II
House Robber I You are a professional robber planning to rob houses along a street. Each house has a ...
- Problem 4: Largest palindrome product
A palindromic number reads the same both ways. The largest palindrome made from the product of two 2 ...
- 制作voc2007数据格式的数据集
最近按照博主分享的流程操作,将自己遇到的难题记录下来,附上原博文链接:https://blog.csdn.net/jx232515/article/details/78680724 使用SSD训练自己 ...
- 爬取QQ音乐歌手的歌单
import requests# 引用requests库res_music = requests.get('https://c.y.qq.com/soso/fcgi-bin/client_search ...
- 网络-Cisco
选择题(每题2分,共20分) 1.192.168.11.1/23的网络地址是( A) A.192.168.10.0 B.192.168.11.0 C.192.168.10.255 D.192.168 ...
- 删除Docker镜像
删除镜像:1)先杀死镜像中所有容器 docker kill $(docker ps -a -q)2)删除镜像中所有容器: docker rm $(docker ps -a -q)3)删除镜像: ...
- 初学node遇到的问题(慢慢补充)
一.看到菜鸟教程的Web模块运行client.js的时候遇到报错: E:\node\server>node client.js events.js:72throw er; // Unhandle ...
- 我与java的故事
前奏 2012年开始接触java,当时还是大二因为博客园的原因我选择了java这门语言进行深入的学习.一开始看的是<动力节点>的教学视频,请原谅我已经忘记那个讲师叫什么名字.但是的项目叫E ...
- 设计模式的uml图的关键(核心)
每个设计模式的关键的部位就是,其变化点.用抽象来封装变化点 如下图的代理模式 关键点就是框图内的subject定义了 实际对象 和代理对象都具有的接口.才形成代理模式
- exp迁移测试库10.2.0.5
目的: 将一套10.2.0.5的UP-UNIX系统的数据,迁移到一台Windows环境下. 迁移方案:由于不同的操作系统,为了方便迁移,只是测试,使用EXP/IMP方式. 迁移流程: 一.源端导出 1 ...