ionic 頁面跳轉動畫問題全解決

1、問題描述：

　　在ionic1開發過程中，頁面的跳轉比較混亂，有的有動畫（且方向不一致）有的沒有動畫，同一模塊下的不同的導航標題帶有動畫，在用click事件在控制器里面$state.go()跳轉的方式就沒有動畫；針對以上比較混亂的問題，書寫這篇博客旨在解決問題，梳理ionic1頁面跳轉的問題。

2、正確頁面跳轉的現象：

• 列表頁去詳情頁需要有動畫（從右到左進入），詳情頁返回是由動畫的（從左到右）　　
• 同模塊之間的子級導航不能由動畫，且切換流暢沒有卡頓

3、解決：

　　ionic處理切換動畫的默認形式是由的也是正確，但是前提是在同一級下的兄弟路由之間的跳轉的是有動畫，該動畫也是可以禁掉的，基於此我們可以將整個同模塊的不同頁面都建立在同一級路由中，不要做深層的路由的嵌套，這樣不同級的路由互相跳轉就會出現問題。

• 同模塊下的路由有不同的子導航和詳情頁的切換，同級的子導航鏈接切換禁掉默認的動畫，在導航出添加nav-transition='none' 實踐項目證明該屬性能解決單一版本的動畫問題，在不能在任何平台都起作用，如果在配上ion-direction='enter'就可以解決大部分平台的問題，
• 去往詳情頁就直接寫ui-sref='xx.details'，就默認帶有動畫；詳情頁頁會自動生成返回按鈕，點擊返回按鈕就返回，且帶有正確的動畫效果
• 如果在controller里面使用$state.go()服務跳轉就默認沒有動畫，想要帶上動畫就需要在后面添加 $ionicViewSwitcher.nextDirection("forward")（從右到左，$ionicViewSwitcher需要依賴注入），這種方式進入詳情頁沒有返回按鈕，需要自己手動添加返回按鈕，且綁上返回事件函數;

  $scope.goback = function() {
        $ionicHistory.goBack();//返回上一個頁面
        $ionicViewSwitcher.nextDirection("back");
      //動畫返回上一個歷史記錄
  }　　

• ionic不同模塊下的各個頁面不能不能互相跳轉，跳轉存在問題，需要將共同的詳情頁放在上一級路由的同級上即不是tab里面，放在inde頁面的,<ion-nav-view></ion-nav-view>里面直接寫路由

  .state('detail', {
        url: '/detail',
        templateUrl: 'templates/gong-detail.html',
        controller: 'gongDetailsCtrl'
      })
  

  　　在不同模塊下的子鏈接下都可以進入該頁面，返回時沒有動畫且沒有返回按鈕，需要按照上一個部分的動態添加返回按鈕，在js里返回上一個歷史記錄；