如何在路线之间进行滑动动画

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