Question

我正在尝试从http://www.gajotres.net/handling-native-view-animations-with-ionic-framework/阅读精彩教程后，将本机页面过渡到我的Ionic项目。

但是，我发现在页面转换完成后有时会更改页面的问题。意思是，它将动画从页面A转换到页面A.只有这样，页面A才成为页面B.文章和插件提供的解决方案是通过估计设置动画开始之前的延迟。但这种做法并不十分可靠。

所以，我正在考虑的不是使用延迟，而是使用以下方法应用动画进入该页面：

$scope.$on('$ionicView.enter', function (event, viewData) {
    window.plugins.nativepagetransitions.slide({
            "direction": "left"
        });
});

从其他页面导航到此页面时效果很好。但是当从其他页面导航到此页面时，将会出现动画问题。

我如何知道用户是否返回此页面以便我可以执行不同的动画方向？

Answer 1

当您拦截$ionicView.enter事件时，您可以检查动画的方向。回调函数接收2个参数。第二个会给你这些信息，所以你可以做这样的事情：

$scope.$on('$ionicView.enter', function (event, viewData) {
    var transitionDirection = viewData.direction !== "back" ? "left": "right";
    window.plugins.nativepagetransitions.slide({
         "direction": transitionDirection
    });
});

第二个参数viewData的属性direction包含动画的方向：back或forward。

离开视图时可以做同样的事情：

$scope.$on("$ionicView.leave", function(event, viewData){
    var transitionDirection = viewData.direction !== "back" ? "left": "right";
    window.plugins.nativepagetransitions.slide({
         "direction": transitionDirection
    });
});

你可以使用其他一些events：

$ ionicView.enter
$ ionicView.leave
$ ionicView.beforeEnter
$ ionicView.beforeLeave
$ ionicView.afterEnter
$ ionicView.afterLeave
$ ionicView.loaded
$ ionicView.unloaded

离子检测“返回”以获得更好的原生页面转换

1 个答案: