我设法在两条路线之间获得动画。
现在我希望当我从HomeComponent转到DashboardComponent时,HomeComponent将上升并离开屏幕,同时DashboardComponent将从底部向上滑动。
我没有很多动画经验,我现在唯一的就是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%)'
}))
])
]);
如何继续,为HomeComponent的底部属性设置动画,还是有更好的方法?
答案 0 :(得分:0)
我已经尝试并编写了适当的代码。
我的动画。文件:
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%)'}))
])
]);
}