如何在离子框架中的选项卡页面之间进行转换

Question

在Ionic Framework中,您可以设置选项卡.选项卡中的页面可以使用"向左滑动"或其他类型的过渡轻松转换.这使应用程序感觉流畅和深思熟虑.

我遇到的问题是,从标签菜单中点击后,与每个标签相关联的页面根本不会过渡,只有"繁荣":页面.

我在codepen上发现了一支笔(链接到codepen演示版),它可以按照我想要的方式复制这种效果(在某种程度上),但我不能在任何情况下复制它,更不用说Ionic rc0(1.0)版本了.

codepen代码使用似乎在其他地方不起作用的动画:

slide-left-right

请协助.

Answer 1

我还没有尝试让这个确切的示例发挥作用，但我通过为所有选项卡指定相同的视图名称，在我的一个应用程序中实现了类似的效果：

应用程序.js

$stateProvider
.state('signin', {
  url: "/sign-in",
  templateUrl: "sign-in.html",
  controller: 'SignInCtrl'
})
.state('forgotpassword', {
  url: "/forgot-password",
  templateUrl: "forgot-password.html"
})
.state('tabs', {
  url: "/tab",
  abstract: true,
  templateUrl: "tabs.html"
})
.state('tabs.home', {
  url: "/home",
  views: {
    'tab-view': {
      templateUrl: "home.html",
      controller: 'HomeTabCtrl'
    }
  }
})
.state('tabs.facts', {
  url: "/facts",
  views: {
    'tab-view': {
      templateUrl: "facts.html"
    }
  }
})
.state('tabs.facts2', {
  url: "/facts2",
  views: {
    'tab-view': {
      templateUrl: "facts2.html"
    }
  }
})
.state('tabs.about', {
  url: "/about",
  views: {
    'tab-view': {
      templateUrl: "about.html"
    }
  }
})

标签.html

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="slide-left-right">

    <ion-tab title="Home" icon="ion-home" href="#/tab/home">
      <ion-nav-view name="tab-view"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
      <ion-nav-view name="tab-view"></ion-nav-view>
    </ion-tab>

  </ion-tabs>

请注意每个状态的名称“tab-view”，以及ion-nav-view每个选项卡上的名称属性。