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);
    }
  }
}

Disquietude

do you get any errors in the console log? – Bowse

Also, can we see the animation code? – Bowse

I added the animation code, and i get no errors in the console. – Chillon

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.

Penicillin

This does not work for me, i set the resolve outside the view so its for the state it like you have in the second example. However this does not change anything. Any other suggestions to what might be wrong? :-/ – Chillon

What versions of ui-router, angular, and angular animate are you using? – Penicillin

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

Bowse

Thank you for you answer however this does not change anything. I have tried both to place the main class wrapper inside the template as you suggested and refer to the element view by [ui-view=main]. Do you have any other ideas might be causing this? – Chillon

please edit your post with the content of main.html. Also, is the animation purely on CSS or are you using some angular method? – Bowse

The animations are triggered by angular that adds the classes ng-enter, ng-enter-active for the entering element, and ng-leave, ng-leave-active for the one that is exiting. So animations are purely css, the javascript only handles the adding and removing the classes, and duplicating the view. – Chillon

Hmm, I don't have anymore idea, but you can debug it using the inspect element in chrome and see if the class is really being added or removed. If you create a plnkr.co that replicates your problem then it would be easier. – Bowse