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

Question

很可能我做错了，但有什么办法可以延迟 ngIf？

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

问题是（我认为）：添加和删除来自父元素的元素和来自子元素的元素时存在重叠，导致 "jumping" 替换了子组件中的元素。

这里有一个 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

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

Angular: ngif animation jumps! How to animate ngif element after previous element is removed from DOM?

angular

typescript

angular-ng-if