No transition animation between views

ionic-v1
1

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:

APP.JS

.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('app.map', {
      url: '^/map',
      views: {
        'mainContent': {
          templateUrl: 'templates/app.map.html',
          controller: 'MapCtrl'
        }
      } 
 })

INDEX.HTML

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

SIDEMENU.HTML

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

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

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

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