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. Ubuntu16.04 ionic(jdk,sdk,gradle)环境搭建完全攻略

    在Ubuntu16.04当中搭建一个ionic环境还是按照官方教程的来,主要问题是首先要把JDK,SDK搭好,环境变量配好.本文中给的包的下载请不要直接用浏览器下载,很慢,尽量用wget 下载,重要的 ...

  2. python 全栈开发笔记 1

    将自己的姓名用进制表示出来 #自己姓名的进制表示 name=input('请输入你的名字:') for i in name: print(i) # python 3 中是按字符进行循环的 bytes_ ...

  3. zookeeper集群的搭建(个人实践可行)

    linux 上面 zookeeper 集群(最少3个节点192.168.204.128.192.168.204.129.192.168.204.130)安装 1.创建文件夹/usr/local/zoo ...

  4. webdriver的三种时间等待( sleep(); implicitly_wait(); WebDriverWait();)

    https://blog.csdn.net/HeatDeath/article/details/71774572 基于<Selenium 2自动化测试实战>的学习笔记(11)—— 设置等待 ...

  5. kubernetes二进制部署k8s-master集群controller-manager服务unhealthy问题

    一.问题现象 我们使用二进制部署k8s的高可用集群时,在部署多master时,kube-controller-manager服务提示Unhealthy [root@ceph-01 system]# k ...

  6. selenium中的alter弹框

    from selenium import webdriverimport timedriver=webdriver.Chrome()driver.get('http://ui.imdsx.cn/uit ...

  7. jQuery中有关each方法的使用

    概述: each() 方法规定为每个匹配元素规定运行的函数. 返回 false 可用于及早停止循环,相当于break. 返回 true 可以结束本次循环,相当于continue. 语法: $(sele ...

  8. Linux 驱动——Button驱动4(fasync)异步通知

    button_drv.c驱动文件: #include <linux/module.h>#include <linux/kernel.h>#include <linux/f ...

  9. 正则表达式andJS内存空间详细图解

    http://www.runoob.com/js/js-regexp.html https://blog.csdn.net/pingfan592/article/details/55189622

  10. Spring XML文件配置

    singleton不能创建多对象(默认) <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...