Aurelia路由器视图动画与swap-order ="with"

Question

我正在使用aurelia-animator-css为路由器视图设置动画.导航到新的路由器视图后,我希望当新视图从右侧滑动到屏幕时,当前视图从屏幕向左滑动.

这是我的router-view元素:

<router-view swap-order="with"></router-view>

这是每个视图中的顶部元素:

<div class="pages au-animate">

这是css:

@keyframes slideLeftIn {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes slideLeftOut {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
.pages.au-enter {
  transform: translate(100%, 0);
}
.pages.au-enter-active {
  animation: slideLeftIn 0.6s;
}
.pages.au-leave-active {
  animation: slideLeftOut 0.6s;
}

我使用autoprefixer,所以不需要像"webkit-"这样的前缀.

使用时swap-order="with",当前视图从屏幕向左滑动,然后出现新视图而不滑动.

同样的事情发生在swap-order="before".

这里有一个YouTube的视频画面带swap-order="with".

使用时swap-order="after",当前视图从屏幕向左滑动,然后新视图从右侧滑入.

这里有一个YouTube的视频画面带swap-order="after".

我认为这swap-order="with"将是这种情况下需要的那个.但是swap-order="after"最接近我需要的,因为两个视图实际上都执行幻灯片,而不是一起.

Answer 1

事实证明，我只需要将以下样式添加到我的 .pages 类中：

.pages {
    position: absolute;
    left: 0px;
    top: $navBarHeight; /* using sass var for the height of my navbar */
}

现在一切都按预期进行。