No transition animation between views


Hello everyone,
I have an issue with an Ionic app. The transition animation works when I move between two states that share the same parent but it does not animate when I move between states that share different parents. My code is below to make it clear:


.state('welcome', {
      url: '/welcome',
      templateUrl: 'templates/welcome.html',
      controller: 'WelcomeCtrl'

.state('intro', {
      url: '/intro',
      templateUrl: 'templates/intro.html',
      controller: 'IntroCtrl'

.state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/sidemenu.html',
      controller: 'SideMenuCtrl'

    .state('', {
      url: '^/map',
      views: {
        'mainContent': {
          templateUrl: 'templates/',
          controller: 'MapCtrl'


<ion-nav-view animation="slide-left-right"></ion-nav-view>


  <ion-side-menu-content drag-content="false">
      <ion-header-bar id="sidemenu-header">
    <ion-nav-view animation="slide-left-right" name="mainContent"></ion-nav-view>

  <ion-side-menu side="left" id="sidemenu" width="200">
        <ion-item menu-close>Profile</ion-item>

When I move between the welcome and intro states the view transition is animated but if I move between say welcome to, it does not animate the view transition. It just flashes straight to the view.

I don’t know what I’m doing wrong. I appreciate your answers.