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"
    })
  • 相关阅读:
    DNNClassifier 深度神经网络 分类器
    浏览器对MP4视频 帧宽度 高度的兼容性
    UnicodeEncodeError:'latin-1' codec can't encode character
    文件夹下 文件计数
    the largest value you actually can transmit between the client and server is determined by the amount of available memory and the size of the communications buffers.
    the “identity” of an object
    广告特征 用户特征
    如果一个维度全覆盖,则有效维度应该对该维度全覆盖
    a high-level neural networks AP
    使用 LDA 挖掘的用户喜好主题
  • 原文地址:https://www.cnblogs.com/liaolei1/p/7675778.html
Copyright © 2011-2022 走看看