Hey everyone,
I’m fairly new to ionic and angular in general and have been moving my app from a custom navigation to using ui-router (as I thought it handy and probably would have regretted it later if I didn’t :)) but I’m having some trouble with the “fade-in” animation. My index.html looks like this:
<ion-pane ng-controller="mainController">
<ion-side-menus ng-controller="menuController">
<ion-side-menu-content drag-content="false" id="main-pane">
<ion-header-bar align-title="left" id="app-header" class="animate-show-hide" ng-show="!openAnim()">
<app-header></app-header>
</ion-header-bar>
<ion-content scroll="false" id="content-pane" class="has-header">
<app-intro></app-intro>
<ion-nav-view name="search" animation="fade-in"></ion-nav-view>
<ion-nav-view name="main" animation="fade-in"></ion-nav-view>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="right">
<right-menu></right-menu>
</ion-side-menu>
</ion-side-menus>
</ion-pane>
and my app config like this:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('start', {
views: {
'search': {
template: '',
},
'main': {
template: '',
}
}
})
.state('home', {
views: {
'search': {
templateUrl: 'views/search.html',
controller: 'searchController'
},
'main': {
template: '',
}
}
})
.state('trip-plan', {
views: {
'main': {
templateUrl: 'views/trip-plan.html',
controller: 'mapController',
}
}
})
.state('survey', {
views: {
'search': {
template: ''
},
'main': {
templateUrl: 'views/survey.html'
}
}
})
$urlRouterProvider.otherwise("");})
but for some reason the “search” container doesn’t fade-in properly at all (it just appears out of nowhere). The fade-in effect I really want can be found here: http://www.city-travelz.herokuapp.com which is the app in the state before I started moving to ui-router.
All help appreciated