Page Transition Not Working Ionic Framework

angularjs, ionic-framework

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>

Problem

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> ```

Original source