我在我的两条路线上配置了以下动画。
trigger('routeAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('1s', style({ backgroundColor: 1 }))
]),
transition(':leave', [
style({ backgroundColor: 1 }),
animate('1s', style({ backgroundColor: 0 }))
]),
]),
它们正常工作。当从路由 A 切换到 B 时,两者都会执行。但是它们同时执行。我希望 TO 路线在进入之前等待 FROM 路线的退出动画完成。
我希望 A 在 B 进来之前完全淡出。
这可能吗?也许有生命周期钩子(Hook)之类的?
最佳答案
在进入路线的动画开始之前等待离开路线的动画完成:
const fadeIn = [
query(':leave', style({ opacity:1 })),
query(':enter', style({ opacity:0 })),
query(':leave', animate('200ms', style({ opacity:0 }))),
query(':enter', animate('200ms', style({ opacity:1 })))
]
...
trigger('routerAnimations', [
transition('route1 => route2', fadeIn)
]
动画将按顺序播放。
(在建议将进入路线延迟离开路线的持续时间后更新,导致冗长的解决方案)
关于javascript - Angular 2/4+ 路由器动画,等待上一个路由动画完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44347953/