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. d3js可视化策略

    d3js是数据驱动图形的思路.基本可以这么理解,有什么样的图形,后面基本就有类似结构的数据.大概思路步骤如下: 一.适配数据格式 这一步主要是为第二部服务,第一步的结果作为第二部的入参. 比如,画层级 ...

  2. 第八次作业:聚类--K均值算法:自主实现与sklearn.cluster.KMeans调用

    import numpy as np x = np.random.randint(1,100,[20,1]) y = np.zeros(20) k = 3 def initcenter(x,k): r ...

  3. webpack-dev-server报错

    运行npm run dev报错,---- webpack-dev-server --inline --progress --config build/webpack.dev.conf.js npm E ...

  4. 组合,Mixin,类、类对象、实例对象

    1.组合,将几个横向关系的组合在一起.所谓的组合就是将类的实例化放到新类里面,那么就将旧类组合进去了. class Turtle: def __init__(self, x): # 注意 init 前 ...

  5. log4j:WARN Please initialize the log4j system properly解决办法

    使用log4j,报警如下: log4j:WARN No appenders could be found for logger log4j:WARN Please initialize the log ...

  6. 网络原因导致的 spring cloud config 读取git上的配置文件时报错:Cannot clone or checkout repository

    今天在公司使用spring cloud config搭建配置中心的时候,出现了读取不到git库的问题:Cannot clone or checkout repository.在网上百度,前面几个答案都 ...

  7. Holer实现外网访问本地MySQL数据库

    外网访问内网MySQL数据库 内网主机上安装了MySQL数据库,只能在局域网内访问,怎样从公网也能访问本地MySQL数据库? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装并启 ...

  8. hive防止数据被误删除

    1.HDFS层面开启trash功能(fs.trash.interval) 被删除的数据在HDFS中的/user/$USER/.Trash目录中,开启这个功能秩序要将配置属性fs.trash.inter ...

  9. codeblocks报错:cannot open output file bin\Debug\2.exe Permission denied

    在任务管理器中也找不到正在执行的任务,以为清除了,但是重新编译文件报错. 解决办法: 打开W+R窗口,输入taskkill -IM 2.exe /F

  10. asp.net 获取 repeater checkbox 值

    webform中获取repeat控件列表下的checkbox选中的值: 码农上代码: public static string getSelectedIDs(Repeater Rpt_) { stri ...