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的更多相关文章

  1. ionic-native-transitions调用原生页面切换实现ionic路由切换

    废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic ...

  2. html5各种页面切换效果和模态对话框

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  3. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  4. jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  5. Android - FragmentTabHost 与 Fragment 制作页面切换效果

    使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...

  6. Android - TabHost 与 Fragment 制作页面切换效果

    Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...

  7. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

  8. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  9. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

随机推荐

  1. 遇到的难题之一 —— js方法toFixd()

    工作中遇到金额需要保留两位小数的需求,单价1.265,数量为1,正常来讲金额应为1.27,用了toFixd()方法后结果为1.26. 最终找到问题所在:1.265 - 1.26 = 0.0049999 ...

  2. angular $resouse服务

    创建服务 var taskInstancesResource = function ($resource) { var resource = $resource('/ssc-cutover/rest/ ...

  3. Ceph Luminous版本创建OSD无法激活问题

    一.问题描述 部署ceph的Luminous之ceph-12.2.10版本,在其中一个集群节点部署OSD时,发现命令执行完毕后,集群中并没有将格式化的盘加入到OSD中,也没有任何报错,问题如下: [r ...

  4. Problem A: 字符的变化

    Description 定义一个Character类,具有: 1. char类型的数据成员. 2.构造函数Character(char). 3. Character toUpper():如果当前字符是 ...

  5. Unity3D AssetBundle的打包与加载

    在Unity项目开发过程中,当要做热更新时常常使用一个叫做AssetBundle的东西,这里做一点个人的学习记录 步骤1: 设置打包标签:具体步骤----进入Unity,选择某一资源然后看右下角,在那 ...

  6. JVM概念以及常用设置

    DAY 1 Jvm- java虚拟机 类加载子系统 加载class文件到方法区 方法区 存放类信息 常量信息 常量池信息 辅助堆栈的永久区,解决堆栈信息的产生,是先决条件 3.  Java堆(重要) ...

  7. Jsoup获取全国地区数据(省市县镇村)

    最近手头在做一些东西,需要一个全国各地的地域数据,从省市区到县镇乡街道的.各种度娘,各种谷歌,都没找到一个完整的数据.最后功夫不负有心人,总算找到一份相对来说比较完整的数据,但是这里的数据也只是精确到 ...

  8. 给大家介绍一个实用的RN神器DeviceEventEmitter

    再不出来更新一下自己都感觉不到自己还存在了,这个监听最常用的地方莫过于单选和全选了,,当然远不止这个了,大家可以自己去多尝试几波,举个栗子 A组件全选所在 //全选 choose(bool){ //选 ...

  9. 20165214 2018-2019-2 《网络对抗技术》Exp1 PC平台逆向破解 Week3

    <网络对抗技术>Exp1 PC平台逆向破解之"逆向及Bof基础实践说明" Week3 一. 实验预习 1.什么是漏洞?漏洞有什么危害? 漏洞就是在计算机硬件.软件.协议 ...

  10. .net实现扫描二维码登录webqq群抓取qq群信息

    一.流程 1. //获得二维码的qrsig,cookie标志 2. //登录二维码获得二维码的状态,及最新的url 3. //登录此网址,获得Cookies 4.//cookies,筛选出skey信息 ...