How to Do Transitions Between Tabbed Pages in Ionic Framework

Within the Ionic Framework, you can setup tabs. The pages within the tabs can easily transition using a "slide-left-right" or some other type of transition. This makes the application feel smooth and thought-out.

The issue that I have is that the pages associated with each tab, once clicked from the tab menu, do not transition at all, there is just "boom": a page.

I found a pen on codepen (link to codepen demo) that can replicate this effect as I want it (to some degree), but I cannot replicate it in any scenario, much less the Ionic rc0 (1.0) version.

The codepen code uses an animation that seems to not work elsewhere:

<ion-nav-view animation="slide-left-right"></ion-nav-view>

Please assist.

I haven't tried to get that exact example working, but I achieved a similar effect in one of my apps by giving all the tabs the same view name:

app.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"
    }
  }
})

tabs.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>

Notice the name "tab-view" for each state and again as the name attribute on the ion-nav-view in each tab.