/shprink/ionic-native-transitions
/package/ionic-native-transitions
这个是ionic1的, 推荐使用ionic2开发, 或者ionic-native
Issue & solution
直接使用ionic的css动画, 页面数据较多的时候简直卡成翔了, 使用分页加载也没有太大的改善.
目前最佳方案是使用[]ionic-native-transitions插件](/shprink/ionic-native-transitions)
install
# npmnpm install ionic-native-transitions --save# Using Ionic CLIionic cordova plugin add /Telerik-Verified-Plugins/NativePageTransitions#0.6.5# 报错Probably this is either a connection problem, or plugin spec is incorrect.# 使用--nofetch来成功安装cordova plugin add /Telerik-Verified-Plugins/NativePageTransitions#0.6.5 --save --nofetch
Import
可以将ionic-native-transitions目录copy到www\lib下, 再在index.html中引入
<script src="lib/ionic-native-transitions/dist/ionic-native-transitions.min.js"></script>
config
angular.module('yourApp', ['ionic-native-transitions']).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 4iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1androiddelay: -1, // same as above but for Android, default -1winphonedelay: -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 optionbackInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back});$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 });$ionicNativeTransitionsProvider.setDefaultTransition({type: 'slide',direction: 'left'});$ionicNativeTransitionsProvider.setDefaultBackTransition({type: 'slide',direction: 'right'});});
crosswork
如果你用了crosswork记得config.xml中添加:
Android
if you are using Crosswalk > 1.3 please add the following to your config.xml
<preference name="CrosswalkAnimatable" value="true" />
tab
我们不期望tab也出现这个切换效果, 禁用tab先的动画
.state('home', {url: '/home',nativeTransitions: null,templateUrl: "templates/home.html"})
如果觉得《ionic1页面切换动画卡顿优化》对你有帮助，请点赞、收藏，并留下你的观点哦！
