Ionic Framework Page Transition

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!

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/