Page Transition Not Working Ionic Framework - angularjs

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!

Answer 3

In my case, I was routing to another module -
So I was going from
/tabs/plan
to
/tabs/dinners/edit/123
Once I added the edit component to the routing of my plan module, the transitions worked. I did not need to duplicate the component itself - it is still in the dinner module.
E.g.:
/tabs/plan/edit/123