我正在努力让在v20引入的Angular的进入与离开动画发挥作用。我使用的是Angular 21.2.5。我在Firefox 148和 Edge 146上测试过，均在Windows 11。

我遇到的问题是，DOM元素在未应用animate.leave的情况下被移除。

我取自官方Angular动画文档[1] 的一个示例，并将其打包到Stackblitz[2] 以便调试并延长动画时间。但即便在这个官方示例中，似乎也不起作用。

我是不是搞错了什么，还是这种行为是有缺陷的？

[1] https://next.angular.dev/guide/animations#element-removal-order

[2] https://stackblitz.com/edit/stackblitz-starters-jhnovauq

解决方案

我的建议是创建一个函数，订阅router.events，使用 document.getAnimations，请参考 stackblitz

export function NoAnimateLeave(router: Router) {
  router.events
    .pipe(filter((e: any): e is ActivatedRoute => e instanceof RouterEvent))
    .subscribe((event: any) => {
      document.getAnimations().forEach((x: any) => {
        const el = x?.effect?.target;
        if (el) el.style.transition = 'none';
      });
    });
}

因此，在ApplicationConfig中需要添加，并且另外提供provideRouter，以及一个 provideAppInitializer

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAppInitializer(() => NoAnimateLeave(inject(Router))),
  ],
};

好处在于，如果在未来的版本中有办法在路由切换时避免离场动画，只需要移除provideAppInitializer即可。