Angular 2/4 + Router动画,等待上一个路线动画完成 [英] Angular 2/4+ Router animation, wait for previous route animation to complete
问题描述
我在两条路线上配置了以下动画。
I have the following animation configured on 2 of my routes.
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路线的退出动画完成之后再进入。
They work properly. Both get executed when switching from route A to B. However they execute simultaneously. I would like for the TO route to wait for the FROM route's exit animation to finish before coming in.
我希望A在B进入之前完全消失。
I want A to completely fade out before B comes in.
有可能吗?也许有生命周期挂钩之类的东西?
Is that possible? Maybe with lifecycle hooks or something?
推荐答案
要在进入路线的动画开始之前等待离开路线的动画完成:
To wait for the leaving route's animation to finish before the entering route's animation begins:
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)
]
动画将按顺序播放。
(在建议将进入路线推迟到离开路线的持续时间后进行更新,从而导致冗长的解决方案)
(Updated after suggesting to delay the entering route by the duration of the leaving route, leading to a verbose solution)
这篇关于Angular 2/4 + Router动画,等待上一个路线动画完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!