Angular ui-view animation does not work when using the named views

Question

I have an animation attached to an unnamed ui-view. This works correctly when the router looks like 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 the ui-router, for example: Faulty 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> 

Routing and views work correctly, but the animation does not apply. Any ideas why the animations will be ignored in the second example?

Edit 1: Here is the css animation. However, this works correctly if I remove 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 created a couple of plunkers to try to identify the problem you are facing. This first plunker is a recreation of your first situation when you have one unnamed ui-view . If you click on the button to enter the event state, you will see that the CSS animation is applied as expected when the solution completes (after 2 seconds).

Below is the second plunker , using the second setting with 3 named ui views. You can click the button to change the states, and you will see that the animation works in this case too.

The main change I made is that your permission object in your state configurator should be relative to the state, and not within the views.

Answer 2

Can you try the following?

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

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

Then delete the main class in ui-view, so that you only have this

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

I guess that when creating a ui-view, the main class is deleted. Now, instead of relying on the ui-view shell, you can get the main class inside main.html

Let me know if this helps.