Page Transition Not Working Ionic Framework

Question

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>

Answer 1

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>

Answer 2

I have created a tool Ionic builder to build barebones for ionic app. This will build all needed pages and files, add transitions, tabs or side menus. You can generate the app and download the code. Please give it a try!