Animation in nested views

ionic-v1
1

I’m having trouble with (slide) animations in my nested views. I have 1 index.html:

<body>
    <div ng-controller="mainController">
        <ion-nav-view></ion-nav-view>
    </div>
</body>

I load the following (abstract) template in this view:

<ion-side-menus>
<ion-pane ion-side-menu-content >
    <ion-nav-bar type="bar-positive" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-in-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left" >        
        *side menu*
</ion-side-menu>

The animation on the pages I load in the menuContent view work just fine. But in this view I load a new (abstract) template:

  <ion-nav-view name="aanvraagContent" animation="slide-in-left"></ion-nav-view>
<div class="tabs tabs-positive">
    *tabs*
</div>

But when I load some content in this view, the animation don’t work. When I surround this nav view with an <ion-pane ion-side-menu-content > it does work, but my side menu is gone (it’s still there, but it’s empty). Any idea’s ? Here’s my routing:

Edit: when switching between those tabs, the animations does work, only when I first open the view, it doesn’t work.

$stateProvider.state('eventmenu', {
            url: "/event",
            abstract: true,
            templateUrl: "views/event-menu.html"
        }).state('eventmenu.aanvraag', {
                url: "/aanvraag",
                abstract: true,
                views: {
                    'menuContent': {
                        templateUrl: "views/aanvraag.html",
                        controller: "aanvraagController"
                    }
                }
            }).state('eventmenu.aanvraag.gegevens', {
                url: "/gegevens",
                views: {
                    'aanvraagContent': {
                        templateUrl: "views/aanvraagGegevens.html",
                        controller: "aanvraagController"
                    }
                }
            }).state('eventmenu.home', {
                url: "/home",
                views: {
                    'menuContent': {
                        templateUrl: "views/home.html",
                        controller: "homeController"
                    }
                }
            }).state('eventmenu.overzicht', {
                url: "/overzicht",
                views: {
                    'menuContent': {
                        templateUrl: "views/overzicht.html",
                        controller: "tableController"
                    }
                }
            });

        $urlRouterProvider.otherwise("/event/overzicht");
    })
2

No one ?
When I open the menu, then click on the second tab and back on the first tab, both show animation. Just not the first time that page loads.

3

It’s a big topic to tackle. Could you put the working and non-working version in a CodePen sample for us to take a look at?

One sample for : " when I load some content in this view, the animation don’t work"

One sample for : “When I surround this nav view with an it does work, but my side menu is gone”

4

So when you click the row, it loads a new page without animation.
When you decomment the first and last line of “aanvraag.html”, it does loads the animation, but the left side menu is empty (second icon on the left top, first is back button).

Thanks in advance