角动画两个单独的元素

Question

我们有两个要素

<div class="loader-content" *ngIf="(loaderSubject$ | async) === 'PENDING'" [@enterAnimation]>
</div>
<div *ngIf="(loaderSubject$ | async) === 'SUCCESS'" [@enterAnimation]>
</div>

他们应用了以下动画

animations: [
    trigger('enterAnimation', [
        transition(':enter', [style({ opacity: 0 }), animate('2000ms', style({ opacity: 1 }))]),
        transition(':leave', [style({ opacity: 1 }), animate('2000ms', style({ opacity: 0 }))])
    ])
]

因此“ PENDING”显示加载程序，“ Success”显示内容div。问题在于，尽管每个元素都可以单独进行动画设置。我们需要“加载程序”先淡出然后在内容中淡出。现在有一个重叠。

如果您查看上面的图像，它同时显示加载程序和内容。加载程序淡出后，将其从dom中移除，内容向上移动。