讓ionic應用實現類原生(shēng)app的平滑過渡

該插件(jiàn)可(kě)以使ionic開發的app，頁面之間的切換實現類似原生(shēng)app的平滑過渡，并且可(kě)以選擇滑動的形式，速度非常快(kuài)。同時支持Android和IOS。

插件(jiàn)安裝：

# 使用Cordova

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

# 使用Ionic CLI

ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

ios9下有時可(kě)能出現閃爍等異常，安裝以下插件(jiàn)解決該問(wèn)題：

# 使用Cordova

cordova plugin add cordova-plugin-wkwebview

# 使用Ionic CLI

ionic plugin add cordova-plugin-wkwebview

andorid下如(rú)果使用了Crosswalk，且版本大(dà)于1.3，需要在config.xml中添加以下内容：

<preference name="CrosswalkAnimatable" value="true" />

配置

首先注入該插件(jiàn)：

angular.module('yourApp', [

    'ionic-native-transitions'

]);

默認配置方式：

.config(function($ionicNativeTransitionsProvider){

    $ionicNativeTransitionsProvider.setDefaultOptions({

        type: 'slide', 

        direction: 'left', //left right top up ，四參數可(kě)選

        duration: 400, //延時時間，單位毫秒，默認400ms

        slowdownfactor: 4, //重疊銜接效果，1不使用，默認 4

        iosdelay: -1, // ios系統的webview延遲,默認 -1

        androiddelay: -1, // android系統的webview延遲，默認 -1

        winphonedelay: -1, // 同上，針對windowphone，默認 -1,

        fixedPixelsTop: 0, // 頂部固定像素數, 默認 0 (iOS and Android)

        fixedPixelsBottom: 0, // 底部固定像素數, 默認 0 (iOS and Android)

        triggerTransitionEvent: '$ionicView.afterEnter', 

        backInOppositeDirection: false 

    });

});

默認配置完成後針對所有路(lù)由UI頁面生(shēng)效。

如(rú)果需要單獨定義某個路(lù)由的效果：

.state('home', {

    url: '/home',

    nativeTransitions: {

        "type": "flip",

        "direction": "up"

    }

    templateUrl: "error404.html"

})

也可(kě)以自(zì)行配置針對各種操作(zuò)系統的滑動效果。

.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: "error404.html"

})

針對一種設備進行設置(以下将僅改變安卓下的效果，其他(tā)設備繼承setDefaultOptions設置的效果)：

.state('home', {

    url: '/home',

    nativeTransitions: {

        "type": "flip",

        "direction": "up"

    },

    nativeTransitionsAndroid: {

        "type": "flip",

        "direction": "right"

    }

    templateUrl: "error404.html"

})

在某個路(lù)由中禁用本插件(jiàn)，比如(rú)tab上的一個按鈕：

.state('home', {

    url: '/home',

    nativeTransitions: null,

    templateUrl: "error404.html"

})

該插件(jiàn)更詳細介紹參看(kàn)github項目地址https://github.com/shprink/ionic-native-transitions

文章(zhāng)引用：

本站(zhàn)文章(zhāng)爲深圳網站(zhàn)建設·源美網絡原創策劃，如(rú)有版權糾紛或者違規問(wèn)題，請(qǐng)聯系我們删除，謝謝！