带有swap-order ="with"的Aurelia路由器查看动画. [英] Aurelia router view animation with swap-order="with"

问题描述

我正在使用aurelia-animator-css对路由器视图进行动画处理.导航到新的路由器视图后，我希望当前视图从屏幕向左滑动，而新视图从右侧向屏幕滑动.

I am using aurelia-animator-css to animate router views. Upon navigation to a new router view, I want the current view to slide off screen to the left while the new view slides onto the screen from the right.

这是我的路由器视图元素:

Here is my router-view element:

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

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

Here is the top element in each of the views:

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

我正在使用自动前缀，因此不需要诸如"webkit-"之类的前缀.

I am using autoprefixer, so there is no need for prefixes such as "webkit-".

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

With swap-order="with", the current view slides off screen to the left, and then the new view appears without sliding.

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

The same thing happens with swap-order="before".

这是带有swap-order="with"的 youtube屏幕视频.

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

With swap-order="after", the current view slides off screen to the left, and then the new view slides in from the right.

这是带有swap-order="after"的 youtube屏幕视频.

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

I would think that swap-order="with" would be the one that is needed in this situation. But swap-order="after" is closest to what I need, since both views actually perform slides, just not together.

推荐答案

事实证明，我只需要在.pages类中添加以下样式:

It turns out that I just needed to add the following styles to my .pages class:

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

现在一切正常.

这篇关于带有swap-order ="with"的Aurelia路由器查看动画.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！