Angular 8 Safari 12动画无法正常工作

Question

嘿Stackoverflow社区，

我想使用动画来淡出我的LoadingSpinner，但是我的行为很奇怪。 在我的主页上，LoadingSpinner逐渐消失，就像我应该一切正常，但是在第二页上，他不会消失。 我将我的LoadingSpinner放在路由器出口上方的app.component.ts中。

@Component({
 selector: 'app-root',
 animations: [fadeOutAnimation],
 template: `
<div *ngIf="!(finishedLoaded$ | async)" [@fadeOut] class="loading-area row root-loading-area">
  <app-loading-spinner></app-loading-spinner>
</div>
<router-outlet appScroller></router-outlet>
 `,
})

finishLoaded是商店选择，我检查了它的设置为true

export const fadeOutAnimation = trigger(
'fadeOut',
[
  transition(
    ':enter', [
      style({ 'opacity': 0 }),
      animate('250ms', style({ 'opacity': 1 }))
    ]
  ),
  transition(
    ':leave', [
      style({ 'opacity': 1 }),
      animate('250ms', style({ 'opacity': 0 })),
    ]
  )
]);

这是我的动画。

它仅在Safari上运行，并且如果我删除动画[@fadeOut]，效果很好。