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");
})