让ionic应用实现类原生app的平滑过渡
该插件可以使ionic开发的app,页面之间的切换实现类似原生app的平滑过渡,并且可以选择滑动的形式,速度非常快。同时支持Android和IOS。
插件安装:
# 使用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下有时可能出现闪烁等异常,安装以下插件解决该问题:
# 使用Cordova
cordova plugin add cordova-plugin-wkwebview
# 使用Ionic CLI
ionic plugin add cordova-plugin-wkwebview
andorid下如果使用了Crosswalk,且版本大于1.3,需要在config.xml中添加以下内容:
<preference name="CrosswalkAnimatable" value="true" />
配置
首先注入该插件:
angular.module('yourApp', [
'ionic-native-transitions'
]);
默认配置方式:
.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setDefaultOptions({
type: 'slide',
direction: 'left', //left right top up ,四参数可选
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
});
});
默认配置完成后针对所有路由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"
})
针对一种设备进行设置(以下将仅改变安卓下的效果,其他设备继承setDefaultOptions设置的效果):
.state('home', {
url: '/home',
nativeTransitions: {
"type": "flip",
"direction": "up"
},
nativeTransitionsAndroid: {
"type": "flip",
"direction": "right"
}
templateUrl: "templates/home.html"
})
在某个路由中禁用本插件,比如tab上的一个按钮:
.state('home', {
url: '/home',
nativeTransitions: null,
templateUrl: "templates/home.html"
})
该插件更详细介绍参看github项目地址https://github.com/shprink/ionic-native-transitions
上一篇: JUI(DWZ)框架,实现刷新当前navTab的方法
下一篇: 支付宝回应安全漏洞
售后保障
承诺任何问题1小时内解决数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款