Javascript 角度2/4+;路由器动画,等待上一个路由动画完成
我在我的两条路线上配置了以下动画Javascript 角度2/4+;路由器动画,等待上一个路由动画完成,javascript,angular,animation,Javascript,Angular,Animation,我在我的两条路线上配置了以下动画 trigger('routeAnimation', [ transition(':enter', [ style({ opacity: 0 }), animate('1s', style({ backgroundColor: 1 })) ]), transition(':leave', [ style({ backgroundColor: 1
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进来之前完全消失
可能吗?可能使用生命周期挂钩或其他工具?在进入路线的动画开始之前等待离开路线的动画完成:
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 })))
]
动画将按顺序播放
(在建议将进入路线延迟离开路线的持续时间后更新,导致详细的解决方案)假设我的状态C没有退出过渡,或者退出过渡仅为.5s,这意味着进入状态a,C将淡出,a将等待.5s,然后淡入。有没有办法绕过这样的事情?当然。我已经更新了我的回复,以展示一些如果我正确理解您的话应该会起作用的方法。如果他们不把事情弄清楚,就告诉我。这看起来还是很肮脏的。但我想这是目前唯一可能的办法。谢谢,谢谢你的怀疑!在深入研究之后,这里有一个更干净的解决方案。嘿,非常欢迎;)我不确定上面的示例是如何工作的,但它看起来更简洁。我有时间就去试试。再次感谢!
trigger('routerAnimations', [
transition('route1 => route2', fadeIn)
]