Angular：ngif动画跳跃！从 DOM 中删除前一个元素后如何为 ngif 元素设置动画？

Question

我可能会搞错这一切，但有没有办法延迟ngIf？

我在父组件中有元素，当单击该元素时，它会淡出并使用ngIf 从 DOM 中删除，当该元素被删除时，子组件中的元素应该进入。

问题是（我认为）：当添加和删除来自父级的元素和来自子级的元素时存在重叠，导致“跳转”到子组件中的元素的位置。

这里有一个 gif 来说明：

这里是html：

<div class="tours-thumbs" *ngIf="!isTourDetailsShown" [@toursThumbsInOut]>
    <div class="tour-container" (click)="showTourDetails($event)" *ngFor="let tour of tourThumbs"
        id="{{ tour.sys.id }}">
        <figure class="tour-image">
            <picture>
                <img src="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.file.url }}"
                    alt="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.description }}"
                    title="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.title }}"
                    [target]="tourBackgroundImg" dynamicBackgroundImg>
                <figcaption><span>{{ tour.fields.tourTitle }}</span></figcaption>
            </picture>
        </figure>
    </div>
</div>
<app-tour-info (sendBackToAllToursEvent)="getBackToAllTours($event)" [tourId]="tourId" *ngIf="isTourDetailsShown">
</app-tour-info>
</div>

正如您所见，在图像缩略图完全从 DOM 中删除之前，左角出现了红色按钮，然后按钮跳转到顶部，我错过了什么？ Here 是 Stackblitz。

Answer 1

解决您的问题的一种可能方法是在 Angular 中使用动画回调事件。
在此处查看官方 Angular 文档：AnimationEvent.
Stackblitz 示例：https://stackblitz.com/edit/angular-ivy-y5momt