页面切换动画

在做Ionic项目时,在HTML标签实现有动画效果的切换页面很简单,只要在a标签中加入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: '退出应用?',
                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);

你可能感兴趣的:(页面切换动画)