在做Ionic项目时,在HTML标签实现有动画效果的切换页面很简单,只要在标签中加入nav-direction="back"或nav-direction="forward"就可以实现了。但是用$state.go()怎么实现动画效果呢?其实也很简单,只要在$state.go()后面加上 $ionicViewSwitcher.nextDirection("back")或 $ionicViewSwitcher.nextDirection("forwoard")就可以实现跟加nav-direction一样的效果了,记得要注入ionicViewSwitcher服务。如果想要在Android手机的返回键也要实现这个效果怎么办呢。
首先要在.run方法中注册返回键时间,然后在$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);