Wie wird das Routeroutlet richtig durch die eckige 4-Animation übertragen?

Question

Hier ist, was ich versuche zu erreichen, ich möchte einen Übergang nach links und rechts, wenn meine Seite wechseln, aber mein Code es funktioniert nicht, das Ereignis ausgelöst, wenn ich dann meine Seite scrollen es so viele Ereignisse auslösen (ich test es mit console.log)

hier ist, wie mein Code

app.component.html wie

aussieht:

<main [@routerTransition]="getRouterOutletState(o)"> 
    <router-outlet #o="outlet"></router-outlet> 
</main> 

und hier meine app.component.ts ist:

animations: [ 
    trigger('routerTransition', [ 
     state('in', style({ transform: 'translateX(0)' })), 
     transition('out => in', [ 
     style({ transform: 'translateX(-100%)' }), 
     animate(400) 
     ]), 
     transition('in => out', [ 
     animate(400, style({ transform: 'translateX(100%)' })) 
     ]) 
    ]), 
    ] 

}) 


export class AppComponent { 
    fadePageInOut: string = 'in'; 

    getRouterOutletState(outlet) { 
    console.log(outlet + " event triggered outlet"); 
    this.fadePageInOut = (this.fadePageInOut === 'in' ? 'out' : 'in'); 
    } 

} 

Warum funktioniert es nicht? was ich hier verpasst habe? und console.log des Ergebnisses mein Code wie folgt aus:

das Ereignis zu, wenn ich meine Seite nach oben scrollen und nach unten, ich etwas falsch für den Fall tun müssen, Trigger- und immer noch der Übergang wird nicht funktionieren

Answer 1

Das Hauptproblem ist in der Animation-Controller: Sie können es auf Eigentum mit Animation Zustand binden sollte, nicht auf ein Verfahren, wie folgt aus:

<main [@routerTransition]="fadePageInOut"> 

es möglicherweise einige weitere Probleme sind, kann ich nicht wirklich sage ohne Live-Beispiel , aber ich denke, dass diese Änderung den Trick machen sollte.

Und die Animation wird nur ausgelöst, wenn Sie den Zustand von „out“ zu „in“ und umgekehrt zu ändern, so scheint es, wie Sie dies auch ändern sollen:

transition('out => in', [ 

dazu:

transition('* => in', [ 

Answer 2

Sie geben keinen Wert von der getRouterOutletState()-Funktion zurück. Daher wird die Animation nicht ausgelöst. Fügen Sie eine Rückgabeanweisung von der getRouterOutletState()-Funktion hinzu und geben Sie den aktuellen Wert fadePageInOut zurück.

getRouterOutletState(outlet) { 
    console.log(outlet + " event triggered outlet"); 
    this.fadePageInOut = (this.fadePageInOut === 'in' ? 'out' : 'in'); 

    return this.fadePageInOut; // <-- Add this line 
} 

Nützlicher Link für Angular Strecke Animationen: https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8