1. 添加插件:cordova plugin add com.telerik.plugins.nativepagetransitions
2. 使用方法:
在index.html中添加:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
app.run(function($ionicPlatform) { $ionicPlatform.ready(function() { // then override any default you want window.plugins.nativepagetransitions.globalOptions.duration = 500; window.plugins.nativepagetransitions.globalOptions.iosdelay = 350; window.plugins.nativepagetransitions.globalOptions.androiddelay = 350; window.plugins.nativepagetransitions.globalOptions.winphonedelay = 350; window.plugins.nativepagetransitions.globalOptions.slowdownfactor = 4; // these are used for slide left/right only currently window.plugins.nativepagetransitions.globalOptions.fixedPixelsTop = 0; window.plugins.nativepagetransitions.globalOptions.fixedPixelsBottom = 0; }); }); $state.go('view', {movieid: id}); window.plugins.nativepagetransitions.slide( {"direction":"up"}, function (msg) {console.log("success: " + msg)}, // called when the animation has finished function (msg) {alert("error: " + msg)} // called in case you pass in weird values );
3. 取消默认的动画:
$ionicConfigProvider.views.transition('no');
4. 如果不希望哪个页面有动画也可以禁用某个页面的动画效果:
.state('tab.message', { url: '/message', nativeTransitions: null, cache:false, views: { 'tab-message': { templateUrl: 'templates/tab-message.html', resolve: load([ 'js/services/commonusefunction/messagesFactory.js', 'js/controllers/messageController.js', 'js/services/public/ionicModalService.js' ]) } } })
5. 设置点击进入某个页面时候的动画:
.config(function($ionicNativeTransitionsProvider){ $ionicNativeTransitionsProvider.setDefaultBackTransition({ type: 'slide', direction: 'right' }); });
6. 您还可以根据这样的设备定义不同的转换(向后和向前):
.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" })