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

$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

我创造了几个掠夺者来尝试确定你所面临的问题。这个first plunker会重新创建您的第一个情况，即您有一个未命名的ui-view。如果单击按钮进入事件状态，则可以看到在解析完成时（2秒后）按预期应用动画CSS。

这是second plunker使用您的第二个设置，其中包含3个名为ui-views的视图。您可以单击按钮来更改状态，您也会看到动画也适用于这种情况。

我所做的主要改变是你的状态配置中的解析对象应该是相对于状态的，而不是视图中的。

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

1 个答案: