Specify Animation Transition on Click

Question

I have an Ionic app and I would love to be able to specify how a transition occurs when a user clicks on a ui-sref click. Currently if I click on the button Scientific Facts , the slide transition to the next view goes from right to left. I would love for it to be able to go from the left to right. Is there any way I can do this with Ionic?

My home page.

  <view title="'Home'">
    <content has-header="true" padding="true">
      <p>Example of Ionic tabs. Navigate to each tab, and
      navigate to child views of each tab and notice how
      each tab has its own navigation history.</p>
      <p>
        <!-- Link is here -->
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>

      <button class="button" ng-click="modal.show()">Open Modal</button>
    </content>
  </view>

The Facts page

<view title="'Facts'">
    <content has-header="true" padding="true">
      <p>Banging your head against a wall uses 150 calories an hour.</p>
      <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
      <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
      <p>A cockroach will live nine days without it's head, before it starves to death.</p>
      <p>Polar bears are left handed.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
      </p>
    </content>
  </view>

The routes section is here.

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('tabs', {
    url: "/tab",
    abstract: true,
    templateUrl: "tabs.html"
  })
  .state('tabs.home', {
    url: "/home",
    views: {
      'home-tab': {
        templateUrl: "home.html",
        controller: 'HomeTabCtrl'
      }
    }
  })
  .state('tabs.facts', {
    url: "/facts",
    views: {
      'home-tab': {
        templateUrl: "facts.html"
      }
    }
  })
})

I have a codepen example here .

Answer 1

The navDirection directive allows you to set the direction of the navigation for a specific link. Usage:

<a class="button icon icon-left ion-chevron-left" href="#/tab/facts" nav-direction="back">Scientific Facts</a>

Make sure you're using Ionic version 1.0+.

Plunkr