javascript - Ionic 检测 "back"以实现更好的 native 页面转换

Question

在阅读 http://www.gajotres.net/handling-native-view-animations-with-ionic-framework/ 的精彩教程后，我正在尝试将 native 页面转换实现到我的 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。

离开 View 时您可以执行相同的操作:

$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