Aurelia路由器视图动画与交换-order=“with”

Question

我使用奥雷利亚-动画师-css动画路由器视图。在导航到一个新的路由器视图时，我希望当前视图从屏幕左边滑动，而新视图从右边滑到屏幕上。

下面是我的路由器视图元素：

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

我是使用自动修复，所以没有必要的前缀，如"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 */
}

现在一切都如期而至。

Answer 2

注:这不是一个问题的答案，但更多的是一个动画风格和问题的@powerbouy在接受的答案。

如果有人像我一样来到这里，寻找一种拥有手机风格导航的方法：

你还需要两部动画，它可以倒转方向。

@keyframes slideRightIn {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes slideRightOut {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}

然后需要一组新的动画类：

.slide-right .pages.au-enter {
  transform: translate(-100%, 0);
}
.slide-right .pages.au-enter-active {
  animation: slideRightIn 0.4s;
}
.slide-right .pages.au-leave-active {
  animation: slideRightOut 0.4s;
}

若要使用左向右向后导航样式，需要将slide-right类应用于.pages的父元素。

可以将其附加到router-view元素中的back()方法中，如下所示：

  back() {
        document.querySelector('router-view').classList.add('slide-right');
        window.history.back(-1);
  }

然后，在detach()事件上，删除它。

detached() {
    // remove class after animation. Only opt-in for showing "back" style animation.
    document.querySelector('router-view').classList.remove('slide-right');
}

更新：

要检测浏览器back按钮的使用情况，可以点击popstate事件。PLATFORM对象来自Aurelia包。

添加一个均衡器：

backEventHandler = () => { this.back(true); };

附加组件时添加事件侦听器：

attached() {
        PLATFORM.global.addEventListener("popstate", this.backEventHandler);
    }

在分离组件时删除事件侦听器：

detached() {
        // remove class after animation. Only opt-in for showing "back" style animation.
        document.querySelector('router-view').classList.remove('slide-right');

        PLATFORM.global.removeEventListener("popstate", this.backEventHandler);
    }

更新back()函数，以包括一个参数，以判断是否从浏览器调用它。

back(native?: boolean) {
        document.querySelector('router-view').classList.add('slide-right');

        if (!native) {
            window.history.back(-1);
        }
    }