ionic 页面跳转动画

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需要依赖注入），这种方式进入详情页没有返回按钮，需要自己手动添加返回按钮，且绑上返回事件函数;

  1 2 3 4 5

  $scope.goback =  function () {        $ionicHistory.goBack(); //返回上一个页面        $ionicViewSwitcher.nextDirection( "back" );      //动画返回上一个历史记录 }

• ionic不同模块下的各个页面不能不能互相跳转，跳转存在问题，需要将共同的详情页放在上一级路由的同级上即不是tab里面，放在inde页面的,<ion-nav-view></ion-nav-view>里面直接写路由

  1 2 3 4 5

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

  　　在不同模块下的子链接下都可以进入该页面，返回时没有动画且没有返回按钮，需要按照上一个部分的动态添加返回按钮，在js里返回上一个历史记录；