Ionic--页面切换动画

2019独角兽企业重金招聘Python工程师标准>>>

问题：有的页面切换没有动画效果。

解决方法：

   方法一：只要在标签中加入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);

转载于:https://my.oschina.net/lwenhao/blog/1517810