Question

我在2条路线上配置了以下动画。

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进来之前完全淡出。

这可能吗？也许有生命周期钩子或什么？

Answer 1

在进入路线的动画开始前等待离开路线的动画完成：

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)
]

动画将按顺序播放。

（建议在离开路线的时间内延迟进入路线时更新，导致详细的解决方案）

Angular 2/4 + Router动画，等待以前的路线动画完成

1 个答案: