When developing an app using ionic, you will find that the animation of switching pages will be stuttered and not smooth. In order to ensure the user experience, most people will use the method of disabling animations $('no'); but it is not the best solution. Cordova provides native transitions to enable pages to switch almost prototypes. The main steps are as follows:
1. npm install ionic-native-transitions --save Download the file and put it in the www/lib folder
2. Add in<script src="lib/ionic-native-transitions/dist/"></script>
2. Cordova plugin add cordvoa-plugin-NativePageTransitions to install this plugin
3. Introduce the following information in the 'ionic-native-transitions' configuration and disable $('no');
$({
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 (. a tab bar), default 0 (iOS and Android)
triggerTransitionEvent: '$', // 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
});
In this way, in the packaged app, the effect of switching the cut faces will be much smoother than the ones that are included in ionic;
Notice:The direction of page switching, back<ion-nav-back-button>The default is left to right, and the other is right to left. Sometimes you may not use it.<ion-nav-back-button>This tag is used<ion-nav-bar>For this tag, add custom things to backward. At this time, backward is pressing right to left, so how to go left to right?$rootScope.$ionicGoBack();That's OK, not use$();The method of backing afterwards.
For more information, please see this address
/shprink/ionic-native-transitions
The above is the solution to using ionic to switch page lags. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!