離子檢測「返回」以獲得更好的本地頁面轉換

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