问题:有的页面切换没有动画效果。
解决方法:
方法一:只要在标签中加入nav-direction="back"(向右滑动)或nav-direction="forward"(向左滑动)就可以实现了。
例如:<a class="button icon-left ion-ios-arrow-left button-clear" ui-sref="tab.news" nav-direction="back">Back</a>
方法二:只要在$state.go()后面加上 $ionicViewSwitcher.nextDirection("back")(向右滑动)或 $ionicViewSwitcher.nextDirection("forwoard")(向左滑动)就可以实现跟加nav-direction一样的效果了,记得要注入ionicViewSwitcher服务。
如果想要在Android手机的返回键也要实现这个效果怎么办呢。
1.首先要在.run方法中注册返回键事件。
2.在$ionicHistory.goBack()后加上$ionicViewSwitcher.nextDirection("back")(向右滑动)或 $ionicViewSwitcher.nextDirection("forwoard")(向左滑动)即可。
例如:
$ionicPlatform.registerBackButtonAction(function (e) {
e.preventDefault();
function showConfirm() {
var confirmPopup = $ionicPopup.confirm({
title: '<strong>退出应用?</strong>',
template: '你确定要退出应用吗?',
okText: '退出',
cancelText: '取消'
});
confirmPopup.then(function (res) {
if (res) {
ionic.Platform.exitApp();
} else {
// Don't close
}
});
}
// Is there a page to go back to?
if ($location.path() == '/tab/dash') {
showConfirm();
} else if ($ionicHistory.backView()) {
// Go back in history
$ionicHistory.goBack();
$ionicViewSwitcher.nextDirection("back");
} else {
// This is the last page: Show confirmation popup
showConfirm();
}
return false;
}, 101);