使用命名视图时,角度ui视图动画不起作用

Question

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

工作范例:

$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添加不同的视图时,如下所示:破碎的例子:

$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>

路由和视图正常工作,但不应用动画.在第二个例子中,为什么动画会被忽略的任何想法？

编辑1: 这是动画css.但是,如果我删除3个不同的视图,这可以正常工作.

.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

你可以尝试以下方法吗？

在 app/main/main.html 中，用这个包裹它的内容

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

然后删除 ui-view 中的主类，这样你就只有这个

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

我猜测当生成 ui-view 时，主类将被删除。现在，您可以在 main.html 中获取主类，而不是依赖 ui-view 包装器

如果有帮助请告诉我