zoukankan      html  css  js  c++  java
  • 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"
    })
  • 相关阅读:
    [MFC] MFC 用mciSendString加载WAV资源文件
    [JS] HTML QQ分享界面js代码
    [MFC] MFC 打开HTML资源(用ID版,也可加载到自己的web控件上)
    [ACM_暴力][ACM_几何] ZOJ 1426 Counting Rectangles (水平竖直线段组成的矩形个数,暴力)
    [ACM_动态规划] ZOJ 1425 Crossed Matchings(交叉最大匹配 动态规划)
    easyui combobox可编辑的情况下,只能首字母开始过滤的问题选项
    easyui-combobox绑定回车事件注意事项
    easyui-combobox绑定回车事件相关
    jquery-qrcode 生成和读取二维码
    zxing生成二维码和读取二维码
  • 原文地址:https://www.cnblogs.com/liaolei1/p/7675778.html
Copyright © 2011-2022 走看看