Page Transition Not Working Ionic Framework

Issue

I have set up my template pages and my routes. My page transition does not work when I change state to 'login' state, it just shows the page without transition. I don't know what the problem could be. My application's main page is index.html with an <ion-nav-view> element.

Here is my routing code:

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

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: 'AppCtrl'
})

.state('app.home', {
    url: '/home',
    views: {
        'menuContent': {
            templateUrl: "templates/home.html",
            controller: 'HomeCtrl'
        }
    }
})

.state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'LoginCtrl'
});
       $urlRouterProvider.otherwise('/app/home');
 })

menu.html: This page is the parent state. Other pages inherit from it.

<ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable" id="header" animation="slide-left-right">
        <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>

        <img src="img/logo.png" alt="EasySpree" />

        <ion-nav-buttons side="right">
            <button class="button button-icon icon ion-ios7-email">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-pane>

index.html: Main Page - route defined on this page

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

Solution

You have to put it in the animation="slide-left-right" in of your menu.html page.

E.g. menu.html:

<ion-pane ion-side-menu-content>
  <ion-nav-bar class="bar-stable" id="header" animation="slide-left-right">
    <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>

      <img src="img/logo.png" alt="EasySpree" />

      <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-ios7-email">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

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

Answered By - cainhs