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路由器動畫

回答

相關問題