Aurelia router zobacz animację z zamień-zamień = "z"

Question

Używam animacji aurelia-css do animowania widoków routera. Po przejściu do nowego widoku routera chcę, aby bieżący widok zsunął się z ekranu w lewo, podczas gdy nowy widok przesunie się na ekran z prawej strony.

Oto mój router widok elementu:

<router-view swap-order="with"></router-view>

Oto górny element w każdym z widoków:

<div class="pages au-animate">

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

Używam autoprefix er, więc nie ma potrzeby stosowania prefiksów, takich jak "webkit-".

Z swap-order="with", aktualny widok zsuwa się po lewej stronie ekranu, a następnie nowy widok pojawia się bez poślizgu.

To samo dzieje się z swap-order="before".

Oto youtube screen video z swap-order="with".

Z swap-order="after", aktualny widok zsuwa się po lewej stronie ekranu, a następnie nowy widok przesuwa się z prawej strony.

Oto youtube screen video z swap-order="after".

Myślę, że swap-order="with" byłaby taka, która jest potrzebna w tej sytuacji. Ale swap-order="after" jest najbliższy temu, czego potrzebuję, ponieważ oba widoki faktycznie wykonują slajdy, a nie razem.

Answer 1

Okazuje się, że po prostu potrzebne, aby dodać następujące style do mojej klasy .strona:

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

Teraz wszystko działa zgodnie z oczekiwaniami.

Answer 2

Uwaga: To nie jest odpowiedź na pytanie, ale bardziej dodatek do stylu animacji i pytanie z @powerbouy w zaakceptowanej odpowiedzi.

Jeśli ktoś przyszedł tutaj, jak ja, szuka sposobu, aby mieć nawigację w stylu Telefon:

będzie trzeba jeszcze dwie animacje, która odwraca kierunek.

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

Wtedy potrzebny jest nowy zestaw klas Animacja:

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

do korzystania z lewa na prawo wstecz stylu nawigacji, trzeba by zastosować klasę slide-right do elementu nadrzędnego .pages

można dołączyć go na elemencie router-view w back() metody jak:

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

Następnie w wydarzeniu detach() usuwasz je.

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

---

UPDATE:

Aby wykryć również wykorzystanie przeglądarek przycisk back, można wykorzystać zdarzenia popstate. Obiekt PLATFORM pochodzi z pakietu Aurelia PAL.

Dodaj eventhandler:

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

Dodaj detektor zdarzenia, gdy składnik jest połączony:

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

Usuń detektor zdarzeń, gdy składnik jest indywidualny:

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

zaktualizować funkcję back() do zawiera także parametr do sprawdzenia, czy jest wywoływany z przeglądarki o r nie.