Question

我正在使用aurelia-animator-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;
}

我使用的是autoprefixer，所以不需要像＃34; webkit - ＆＃34;这样的前缀。

使用swap-order="with"，当前视图向左滑动屏幕，然后显示新视图而不会滑动。

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

这里有youtube screen video swap-order="with"。

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

这里有youtube screen video swap-order="after"。

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

Answer 1

注意：这不是问题的答案，而是在接受的答案中添加了@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');
}

更新：

要同时检测浏览器后退按钮的使用，您可以使用popstate事件。 PLATFORM对象来自Aurelia PAL包。

添加一个事件处理程序：

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

Answer 2

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

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

现在一切都按预期工作了。

Aurelia路由器视图动画与swap-order =＆＃34;与＆＃34;

2 个答案: