ionic native transitions

离子V1的天然过渡。打开它并享受本地过渡！

请注意，该项目现在处于维护模式。我们欢迎PRS进行错误修复，但鼓励您使用离子2和离子本机进行未来的所有开发。

聊天

安装

NPM

https://www.**npmj*s.com/package/ionic–native–transitions

 npm install ionic-native-transitions --save

然后需要库

# ES5
require ( \'ionic-native-transitions\' ) ;

# or ES6
import \'ionic-native-transitions\' ; 

鲍尔

 bower install shprink/ionic-native-transitions

然后插入DIST文件

 <script src=\"./PathToBowerLib/dist/ionic-native-transitions.min.js\"></script>

科尔多瓦/离子

过渡插件的推荐版本为0.6.5或更高。

 # Using Cordova
cordova plugin add https://g*it*hub.*com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

# Using Ionic CLI
ionic plugin add https://g*it*hub.*com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

ios

iOS9上的过渡有时会闪烁。为了防止此操作，您可以安装此插件：

 # Using Cordova
cordova plugin add cordova-plugin-wkwebview

# Using Ionic CLI
ionic plugin add cordova-plugin-wkwebview

安卓

如果您使用的是人行横道> 1.3，请在config.xml中添加以下内容

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

配置

 angular . module ( \'yourApp\' , [
    \'ionic-native-transitions\'
] ) ; 

设置默认选项（可选）

当心：如果知道自己在做什么，则仅使用setDefaultOptions 。

 . config ( function ( $ionicNativeTransitionsProvider ) {
    $ionicNativeTransitionsProvider . setDefaultOptions ( {
        duration : 400 , // in milliseconds (ms), default 400,
        slowdownfactor : 4 , // overlap views (higher number is more) or no overlap (1), default 4
        iosdelay : - 1 , // ms to wait for the iOS webview to update before animation kicks in, default -1
        androiddelay : - 1 , // same as above but for Android, default -1
        winphonedelay : - 1 , // same as above but for Windows Phone, default -1,
        fixedPixelsTop : 0 , // the number of pixels of your fixed header, default 0 (iOS and Android)
        fixedPixelsBottom : 0 , // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
        triggerTransitionEvent : \'$ionicView.afterEnter\' , // internal ionic-native-transitions option
        backInOppositeDirection : false // Takes over default back transition and state back transition to use the opposite direction transition to go back
    } ) ;
} ) ; 

设置默认过渡（可选）

查看可能的过渡列表

 . config ( function ( $ionicNativeTransitionsProvider ) {
    $ionicNativeTransitionsProvider . setDefaultTransition ( {
        type : \'slide\' ,
        direction : \'left\'
    } ) ;
} ) ; 

设置默认返回过渡（可选）

查看可能的过渡列表

 . config ( function ( $ionicNativeTransitionsProvider ) {
    $ionicNativeTransitionsProvider . setDefaultBackTransition ( {
        type : \'slide\' ,
        direction : \'right\'
    } ) ;
} ) ; 

启用/禁用（可选）

您可以根据任何原因在编程中禁用插件：

# Within the config phase
# * @ param { boolean } enabled
$ionicNativeTransitionsProvider . enable ( false ) ;

# Anywhere else ( controller , service etc . )
# * @ param { boolean } enabled                    default true
# * @ param { boolean } disableIonicTransitions    default true
# * @ param { string }  ionicTransitionType        default \'platform\'

# Disable plugin and enable ionic transitions ( same as : enable ( false , false ) )
$ionicNativeTransitions . enable ( false ) ;

# Enable plugin and disable ionic transitions ( same as : enable ( true , true ) )
$ionicNativeTransitions . enable ( true ) ;

# Disable plugin and disable ionic transitions
$ionicNativeTransitions . enable ( false , true ) ;

# Enable plugin and enable ionic transitions
# in some cases it is useful < https : / / github . com / shprink / ionic - native - transitions / issues / 23 >
$ionicNativeTransitions . enable ( true , false ) ;

用法

默认情况下，任何状态转换都将使用默认过渡（在配置阶段定义），但是如果您想使用UI路由器状态定义：

 . state ( \'home\' , {
    url : \'/home\' ,
    nativeTransitions : {
        \"type\" : \"flip\" ,
        \"direction\" : \"up\"
    }
    templateUrl : \"templates/home.html\"
} )

您还可以根据这样的设备定义不同的过渡（向后和向前）：

 . 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\"
} )

覆盖只有一个设备（这里只有Android会不同）

 . state ( \'home\' , {
    url : \'/home\' ,
    nativeTransitions : {
        \"type\" : \"flip\" ,
        \"direction\" : \"up\"
    } ,
    nativeTransitionsAndroid : {
        \"type\" : \"flip\" ,
        \"direction\" : \"right\"
    }
    templateUrl : \"templates/home.html\"
} )

禁用一个状态的本机过渡（例如在选项卡上）

 . state ( \'home\' , {
    url : \'/home\' ,
    nativeTransitions : null ,
    templateUrl : \"templates/home.html\"
} ) 

通过本机过渡在编程上更改页面

状态

# * @ description
# * Call state go and apply a native transition
# * @ param { string | null } state                default : null
# * @ param { object }      stateParams          default: { }
# * @ param { object }      stateOptions         default: { }
# * @ param { object | null } transitionOptions    default : null

$ionicNativeTransitions . stateGo ( \'yourState\' , { } , { } , {
    \"type\" : \"slide\" ,
    \"direction\" : \"up\" , // \'left|right|up|down\', default \'left\' (which is like \'next\')
    \"duration\" : 1500 , // in milliseconds (ms), default 400
} ) ;

location.url

# * @ description
# * Call location url and apply a native transition
# * @ param { string | null } url                 default : null
# * @ param { object | null } transitionOptions   default : null

$ionicNativeTransitions . locationUrl ( \'/yourUrl\' , {
    \"type\" : \"slide\" ,
    \"direction\" : \"down\" , // \'left|right|up|down\', default \'left\' (which is like \'next\')
    \"duration\" : 1500 , // in milliseconds (ms), default 400
} ) ; 

使用指令

 < button native-ui-sref =\" tabs.home({param1: \'param1\', param2: \'param2\'}) \" native-ui-sref-opts =\" {reload: true} \" native-options =\" {type: \'slide\', direction:\'down\'} \" > </ button > 

历史记录后按钮

如果您没有在其上添加特定的ng-click则使用<ion-nav-back-button>指令会自动使用默认的后退过渡。

有软件后按钮（Android）

Android上的硬件返回按钮使用默认的后背过渡

向后滑动（iOS）

现在，滑动将触发状态本机过渡（或默认）。它不使用背部过渡。

您可以这样禁用滑动：

 $ionicConfigProvider . views . swipeBackEnabled ( false ) ; 

事件

您可以收听成功或错误事件

 $rootScope . $on ( \'ionicNativeTransitions.beforeTransition\' , function ( ) {
    // Transition is about to happen
} ) ;

$rootScope . $on ( \'ionicNativeTransitions.success\' , function ( ) {
    // Transition success
} ) ;

$rootScope . $on ( \'ionicNativeTransitions.error\' , function ( ) {
    // Transition error
} ) ;

可能的过渡

幻灯片（默认动画）

 {
    \"type\"          : \"slide\" ,
    \"direction\"     : \"left\" , // \'left|right|up|down\', default \'left\' (which is like \'next\')
    \"duration\"      :  500 , // in milliseconds (ms), default 400
} 

翻动

 {
    \"type\"          : \"flip\" ,
    \"direction\"     : \"up\" , // \'left|right|up|down\', default \'right\' (Android currently only supports left and right)
    \"duration\"      :  500 , // in milliseconds (ms), default 400
} 

淡入（仅iOS和Android）

 {
    \"type\"          : \"fade\" ,
    \"duration\"      :  500 , // in milliseconds (ms), default 400
} 

抽屉（仅iOS和Android）

 {
    \"type\"          : \"drawer\" ,
    \"origin\"        : \"left\" , // \'left|right\', open the drawer from this side of the view, default \'left\'
    \"action\"        : \"open\" , // \'open|close\', default \'open\', note that close is not behaving nicely on Crosswalk
 } 

卷曲（仅iOS，仅上下方向）

 {
    \"type\"          : \"curl\" ,
    \"direction\"     : \"up\" , // \'up|down\', default \'up\'
}

常问问题

动画标签的最佳方法是什么？

使用褪色过渡

 . state ( \'tabs.contact\' , {
    url : \"/contact\" ,
    nativeTransitions : {
        type : \"fade\"
    }
} )

如果要使用幻灯片，请将其与fixedPixelsTop选项一起使用。

 . state ( \'tabs.contact\' , {
    url : \"/contact\" ,
    nativeTransitions : {
        type : \"slide\" ,
        direction : \"left\" ,
        fixedPixelsTop : 93
    }
} )

贡献

发展

 npm install

# Open two terminals
# and run watch to build on the lib files changes
npm run watch

# in the other terminal run following to build the test page and the doc
npm start

打开http://loc*alhos*t*:8080

在设备上进行测试

 npm run platformAddAndroid
npm run platformAddIOS
npm run pluginAddAll

# run iOS devices
npm run runIosDevice

# run iOS devices
npm run runAndroid

谢谢

• Eddy Verbruggen的出色工作：https：//github.com/telerik-verified-plugins/nativepagetransitions
• Gajotres的出色帖子：http：//www.gajotres.net/handling-native-native-view-animations-with-ionic-framework/