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

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