Aurelia路由器动画

我在每个视图中使用au-animate进行页面转换：当前视图幻灯片被遗漏（从中心到左边）并且下一个视图幻灯片被留在（从右到中）。Aurelia路由器动画

@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中做到这一点？

UPDATE：

这似乎是一个bug防止这样的： error aurelia-templating-router 1.0.1 with swap-order

UPDATE2：在上次发布这个错误是固定的！奥里利亚岩石。

来源

2017-01-02 isar

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

来源

2017-01-03 13:05:04

谢谢你的回答，当我在''使用'swap-order ='时出现问题。控制台日志'ERROR [app-router] TypeError：无法读取未定义的属性'animatableElement'，当我更改路由器时，它不断添加视图。基本上没有动画。但是''和'swap-order ='之前''之前的'swap-order ='可以工作，所以也许是bug。现在我在''之后使用'swap-order ='来做类似的动画，但是你知道，在视图之间存在差距。 – isar

嗯。 'swap-order =“with”'对我来说工作正常。你在使用TypeScript吗？ –

我正在使用ES：'au new --here'，'1。 Web（默认）'，'1。巴别尔（默认）'，'3。 Sass'。另外'au -v'是0.23.0。 – isar

Aurelia路由器动画

回答

相关问题