Aurelia Router Ansicht Animation mit swap-order = "mit"

Question

Ich benutze Aurelia-Animator-CSS, um Router Ansichten zu animieren. Nach dem Navigieren zu einer neuen Routeransicht möchte ich, dass die aktuelle Ansicht vom Bildschirm nach links verschoben wird, während die neue Ansicht von rechts auf den Bildschirm verschoben wird.

Hier ist mein Router-View-Element:

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

Hier wird das obere Element in jeder der Ansichten:

<div class="pages au-animate">

Und hier ist die 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; 
} 

Ich verwende Autoprefix äh, so dass Präfixe wie "webkit-" nicht benötigt werden.

Mit swap-order="with" gleitet die aktuelle Ansicht vom Bildschirm nach links, und dann wird die neue Ansicht ohne Verschieben angezeigt. Das gleiche passiert mit swap-order="before".

Hier ist ein youtube screen video mit swap-order="with".

Mit swap-order="after" wird die aktuelle Ansicht vom Bildschirm nach links verschoben, und dann wird die neue Ansicht von rechts eingeblendet.

Hier ist ein youtube screen video mit swap-order="after".

Ich würde denken, dass swap-order="with" wäre derjenige, der in dieser Situation benötigt wird. Aber swap-order="after" ist am nächsten, was ich brauche, da beide Ansichten tatsächlich Dias durchführen, nur nicht zusammen.

Answer 1

Es stellt sich heraus, dass ich nur meine .pages Klasse die folgenden Stile hinzufügen benötigt:

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

Jetzt ist alles wie erwartet funktioniert.

Answer 2

Hinweis: Dies ist keine Antwort auf die Frage, sondern eher eine Ergänzung zu dem Animationsstil und der Frage von @powerbouy in der akzeptierten Antwort.

Wenn jemand hierher gekommen, wie ich es tat, auf der Suche nach einer Möglichkeit, einen Telefon Stil Navigation haben:

Sie müßten zwei weitere Animationen, die die Richtung umkehrt.

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

Dann würden Sie einen neuen Satz von Animationsklassen müssen:

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

Nach links nach rechts rückwärts Navigation Stil zu verwenden, müßten Sie die slide-right Klasse zu Ihrem einem Elternelement von .pages anzuwenden

Man könnte es auf dem wie router-view Element in einem back() Verfahren anhängen:

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

Dann auf dem detach() Ereignis, entfernen Sie es.

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

---

UPDATE:

Um auch die Verwendung des Browser zu erkennen Schaltfläche zurück, könnten Sie das popstate Ereignis anzapfen. Das Objekt PLATFORM stammt aus dem Aurelia PAL-Paket.

ein Eventhandler hinzufügen:

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

Ereignis-Listener hinzufügen, wenn die Komponente angeschlossen ist:

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

Ereignis-Listener entfernen, wenn die Komponente gelöst ist:

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

Aktualisieren, um die back() Funktion enthalten auch einen Parameter, um festzustellen, ob es vom Browser aus aufgerufen wird o r nicht.

back(native?: boolean) { 
     document.querySelector('router-view').classList.add('slide-right'); 

     if (!native) { 
      window.history.back(-1); 
     } 
    }