Angular ui-view animation not working when using named views

Question

I have an animation attached to an unnamed ui-view. This works correctly when the router look slike this:

Working example:

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainCtrl as main',
    resolve: {
      events: function(EventStore) {
        return EventStore.getAll();
      }
    }
  })
  .state('event', {
    url: '/event/:id',
    templateUrl: 'app/event/event.html',
    controller: 'EventCtrl as eventCtrl',
    resolve: {
      event: function(EventStore, $stateParams) {
        return EventStore.getEvent($stateParams.id);
      }
    }
  })

Working html example:

<div ui-view class="main"></div>

However when i add different views to ui-router like so: Broken example:

$stateProvider
  .state('home', {
    url: '/',
    views: {
      'main': {
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl as main',
        resolve: {
          events: function(EventStore) {
            return EventStore.getAll();
          }
        }
      },
      'navigation': {
        templateUrl: 'app/components/navbar/navbar.html',
        controller: 'NavbarCtrl as navbar',
      }
    }
  })
  .state('event', {
    url: '/event/:id',
    views: {
      'main': {
        templateUrl: 'app/event/event.html',
        controller: 'EventCtrl as eventCtrl',
        resolve: {
          event: function(EventStore, $stateParams) {
            return EventStore.getEvent($stateParams.id);
          }
        }
      },
      'aside': {
        template: '<aside-info ng-if="asideCtrl.displayed"></aside-info>',
        controller: 'AsideCtrl as asideCtrl'
      }
    }
  })

Broken HTML:

<div ui-view="navigation"></div>
<div ui-view="main" class="main"></div>
<div ui-view="aside"></div>

The routing and views work correctly however the animations are not applied. Any ideas why animations would get ignored in the second example?

Edit 1: Here is the animation css. However this works correctly if i remove the 3 different views.

.transition-background {
  position: fixed;
  width: 100%;
  height: 100vh;
}
.main {
  transition: all $totalSpeed  $animation .001s;
  overflow: hidden;
  &.ng-leave {
    overflow: hidden;
    .events {
      transition: display 0 $animation $speed;
    }
    .event-animate {
      transition: transform $speed2 $animation;
      position: fixed;
      overflow: hidden;
      top: 0;
      width: 100%;
      min-height: 100vh;
      transform: translate(0,0);
      transform: translate3d(0,0,0);
      top: 0;
      z-index: 4;
    }
    .transition-background {
      transition: transform $speed $animation $speed2;
      background: #68BDFF;
      position: fixed;
      top: 0;
      left: 0;
      transform: translate(0,0);
      transform: translate3d(0,0,0);
      animation-direction: alternate;
      width : 100%;
      z-index: 3;
    }
  }

  &.ng-leave-active {
    .events {
      display: none;
    }
    .event-animate {
      transform: translate(0,100vh);
      transform: translate3d(0,100vh,0);
    }
    .transition-background {
      transform: translate(0,-100vh);
      transform: translate3d(0,-100vh,0);
    }
  }

  &.ng-enter {
    overflow: hidden;
    .event-animate {
      transition: transform $totalSpeed $animation $speed;
      position: fixed;
      overflow: hidden;
      width: 100%;
      min-height: 100vh;
      transform: translate(0,100vh);
      transform: translate3d(0,100vh,0);
      animation-direction: normal;
      z-index: 4;
    }
    .transition-background {
      transition: transform $speed $animation;
      background: #68BDFF;
      position: fixed;
      top: 0;
      left: 0;
      transform: translate(0,-100vh);
      transform: translate3d(0,-100vh,0);
      width : 100%;
      z-index: 3;
    }
  }

  &.ng-enter-active {
    .event-animate {
      transform: translate(0,0);
      transform: translate3d(0,0,0);
    }
    .transition-background {
      transform: translate(0,0);
      transform: translate3d(0,0,0);
    }
  }
}

Answer 1

I've created a couple plunkers to try and determine the issue you're facing. This first plunker is a re-creation of your first situation where you have one unnamed ui-view. If you click on the button to go to the event state, you can see that the animation CSS is applied as expected when the resolve completes (after 2 seconds).

Here is a second plunker using your second setup with 3 named ui-views. You can click the button to change states and you'll see that the animation works in this case too.

The main change I've made is that your resolve object in your state config should be relative to the state, not within the views.

Answer 2

Can you try the following?

in app/main/main.html, wrap it's content with this

<div class="main">
    ...content of main.html...
</div>

Then remove the main class in the ui-view so you will only have this

<div ui-view="navigation"></div>
<div ui-view="main"></div>
<div ui-view="aside"></div>

I'm guessig that when the ui-view is generated, the main class is being removed. Now instead of relying on the ui-view wrapper you can get the main class inside the main.html

Let me know if it helps