angularjs - 使用命名 View 时，Angular ui-view 动画不起作用

Question

我有一个附加到未命名 ui-view 的动画。当路由器看起来像这样时，这可以正常工作:

工作示例:

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

工作 html 示例:

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

但是，当我像这样向 ui-router 添加不同的 View 时:
splinter 的例子:

$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'
      }
    }
  })

损坏的 HTML:

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

路由和 View 正常工作，但未应用动画。任何想法为什么动画会在第二个例子中被忽略？

编辑 1:
这是动画css。但是，如果我删除 3 个不同的 View ，这将正常工作。

.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

我创建了几个 plunkers 来尝试确定您面临的问题。此 first plunker是对您的第一种情况的重新创建，即您有一个未命名的 ui-view .如果单击按钮转到事件状态，您可以看到在解析完成时(2 秒后)按预期应用了动画 CSS。

这是一个 second plunker使用带有 3 个命名 ui-views 的第二个设置。您可以单击按钮来更改状态，您将看到动画也适用于这种情况。

我所做的主要更改是状态配置中的解析对象应该与状态相关，而不是在 View 中。