Wie mache ich eine Slideout-Animation zwischen den Routen

Question

Ich habe es geschafft, eine Animation zwischen 2 Routen zu bekommen.

Jetzt möchte ich, wenn ich von HomeComponent zu DashboardComponent gehe, dass die HomeComponent gehen wird und den Bildschirm verlässt, während die DashboardComponent wird von unten nach oben schieben.

ich mit Animationen viel Erfahrung nicht haben, das einzige, was ich jetzt habe, ist ein FadeIn:

trigger('routeAnimation', [ 
    state('*', 
     style({ 
     opacity: 1, 
     transform: 'translateX(0)' 
     }) 
    ), 
    transition(':enter', [ 
     style({ 
     opacity: 0, 
     transform: 'translateX(-100%)' 
     }), 
     animate('0.2s ease-in') 
    ]), 
    transition(':leave', [ 
     animate('0.5s ease-out', style({ 
     opacity: 0, 
     transform: 'translateY(100%)' 
     })) 
    ]) 
    ]); 

Wie gehe ich vor, die untere Eigenschaft des HomeComponent animieren oder gibt es bessere Möglichkeiten?

Answer 1

Ich habe den entsprechenden Code experimentiert und geschrieben.

Meine animations.ts Datei:

import {trigger, state, animate, style, transition} from '@angular/core'; 

export function routerTransitionTop() { 
    return slideToTop(); 
} 

function slideToTop() { 
    return trigger('routerTransitionTop', [ 
    state('void', style({ 
     position: 'fixed', 
     top: 0, 
     bottom: 0, 
     left: 0, 
     width: '100%' 
    })), 
    state('*', style({ 
     position: 'fixed', 
     top: 0, 
     bottom: 0, 
     left: 0, 
     width: '100%' 
    })), 
    transition(':enter', [ 
     style({transform: 'translateY(100%)'}), 
     animate('1s ease-in-out', 
     style({transform: 'translateY(0%)'})) 
    ]), 
    transition(':leave', [ 
     style({transform: 'translateY(0%)'}), 
     animate('1s ease-in-out', 
     style({transform: 'translateY(-100%)'})) 
    ]) 
    ]); 
}