如何在路線之間進行滑動動畫

Question

我設法在兩條路線之間獲得動畫。

現在我希望當我從HomeComponent轉到DashboardComponent時，HomeComponent會上升並離開屏幕，同時DashboardComponent將從底部向上滑動。

我沒有與動畫的經驗很多，我現在唯一的事情是淡入：

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%)' 
     })) 
    ]) 
    ]); 

如何着手，動畫HomeComponent底部財產或有更好的辦法嗎？

Answer 1

我已經嘗試和書面此時，相應的代碼。

我animations.ts文件：

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%)'})) 
    ]) 
    ]); 
}