Aurelia 路由器动画

Question

我在每个视图中使用au-animate 进行页面转换： 当前视图向左滑出（从中心向左），下一个视图向左滑入（从右向中心）。

@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-active {
  animation: slideLeftIn 0.8s;
}
.pages.au-leave-active {
  animation: slideLeftOut 0.8s;
}

基于：Aurelia router view animation with swap-order="with"

现在，我需要在过渡期间在 DOM 中拥有两个视图，例如在 W3 slide 中。

有没有办法在aurelia 中实现这一点？

更新：

这似乎是一个阻止此的错误： error aurelia-templating-router 1.0.1 with swap-order

更新2： 在上一个版本中，此错误已修复！奥里利亚岩石。

Answer 1

@keyframes slideLeftIn {
  0% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0); }
  100% {
    -webkit-transform: none;
            transform: none; } }

@keyframes slideLeftOut {
  0% {
    -webkit-transform: none;
            transform: none; }
  100% {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0); } }