Proper fade-in with ui-router


#1

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 :slight_smile:


#2

Any chance you could put this into a codepen or plunker?


#3

Try this for fade in animation. You can use ng-show on your whole view explicitly.

.reveal-animation.ng-enter {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.reveal-animation.ng-enter {
  opacity: 0.1;
}

.reveal-animation.ng-enter.ng-enter-active {
  opacity: 1;
}

#4

@mhartington
You gave me this chunk of code boss :slight_smile:


#5

Derp, yeah like forever ago. Hard to remember sometimes :smile:


#6

Hey there,

Afraid that doesn’t work :frowning: – same thing still happens.


#7

I ended up using animation on all individual views, instead of being able to apply the promoted “fade-in” animation on the nav view. Something wrong here :frowning: