Ionic Framework Page Transition - angularjs

Question

Does anyone successfully add a page transition on nested views in angularjs/ionicframework
This is my code for my nested views. When I go to this page transition is not working
<ion-side-menus>
<ion-nav-view name="left"></ion-nav-view>
<ion-nav-view name="main"></ion-nav-view>
</ion-side-menus>
But if I put only this code
<ion-nav-view name="main"></ion-nav-view>
Page transition is working
I hope you can help me with this one. Thank you!

Answer 1

In you index.html you should have a single ion-nav-view (you can populate this ion nav view with multiple ion views) like so:
<div ng-app="ffApp" animation="slide-left-right" ng-controller="authRoute.controller">
<ion-nav-view></ion-nav-view>
Then you want to create states/child states to fill the view:
$stateProvider
.state('authenticate', {
url: '/authenticate',
templateUrl: 'templates/authentication.html'
})
.state('loginIos', {
url: '/loginIos',
templateUrl: 'templates/loginIos.html',
controller: 'loginIos.controller',
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'home.controller',
}).state('home.home1', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
Inside the template file you will have a ion-view with a side menu, if you want to populate the side menu as a child state you can create a child state inside the state provider and then place a ion-nav-view in side menu.
<ion-view>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="ContentController">
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>
</ion-side-menus>
</ion-view>
then when you navigate to a child state such as home.home1 the template for home.home1 will fill the menucontent ion-nav-view which is included in the home state template.
See this example: http://codepen.io/mhartington/pen/Bicmo/