角度-动画运行时的空白

Question

我创建了淡出动画以在页面之间导航。动画显然可以工作，但是有一个奇怪的错误。在页面的负载上，出现右侧的“空白”。

此空间仅在加载时显示，动画结束后该空间消失并正确加载

动画代码是

import {
  trigger,
  animate,
  transition,
  style,
  query,
} from "@angular/animations";

export const fadeAnimation = trigger("fadeAnimation", [
    transition('* => *', [
        query(':enter', [style({ position:'fixed',opacity: 0 }) ], { optional: true }),
        query(':leave', [ animate('3s ease-in-out', style({position:'fixed', opacity: 0 })) ], { optional: true }),
        query(':enter', [ animate('3s ease-in-out', style({position:'fixed', opacity: 1 })) ], { optional: true })
    ])
]);

有人知道为什么会出现此错误吗？