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. 关于FGPA的复位

    关于FGPA的复位 当初开始学FPGA的时候,总是疑惑:FPGA不是没有复位管教么,但总在always看到有复位信号.这个复位信号(我们暂且称为rst_n)从哪里来? 实际上是可以从两个方面获得的,这 ...

  2. mybatis 报The content of elements must consist of well-formed character data or markup. 语法格式错误

    最近在写sql的时候 同时使用到了 >= 和 <= 之前只使用一个的时候 没有什么问题,今天同时使用到了两个,结果xml出现了The content of elements must co ...

  3. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  4. spring jpa 语法

    摘自http://www.cnblogs.com/BenWong/p/3890012.html Table 2.3. Supported keywords inside method names Ke ...

  5. tensorFlow小结

    1,才云科技的书 <实战G深度学习框架>是一本好书,我的练习基本上都在其示例上运行,网上查看的示例都类似. 2,windows下安装了anaconda,采用spyder来运行python ...

  6. 在jsp里面 当鼠标元素触发onmouseover时,旁边出现一个浮动且跟随鼠标的div ,移开消失

    JSP页面 : <label onmouseover="showLongStrlog(window.event, '<list:seqnum></list:seqnu ...

  7. 个人洛谷账号地址——https://www.luogu.org/space/show?uid=181909 附上NOIP查分系统

    个人洛谷地址:       https://www.luogu.org/space/show?uid=181909 NOPI查分地址:      http://bytew.net/OIer/

  8. c语言,中缀表达式转后缀表达式并计算

    //c语言中缀表达式计算 #include <stdio.h> #include <stdlib.h> #include <string.h> #include & ...

  9. Laravel Scout 开启队列, 自定义queue name和queue connection

    scout.php的默认配置: 'queue' => env('SCOUT_QUEUE', false), 修改为: 'queue' => [ 'queue' => env('SCO ...

  10. int 转double , 转float

    Integer log = 21424344;Double log1 = log.doubleValue() / 1000000;System.out.println(log1);BigDecimal ...