离子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文件
科尔多瓦/离子
过渡插件的推荐版本为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中添加以下内容
配置
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则使用
有软件后按钮（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/
下载源码
通过命令行克隆项目:
git clone https://github.com/shprink/ionic-native-transitions.git