Angular：Delay 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中完全删除之前，左上角出现了红色按钮，然后该按钮跳到顶部，我丢失了什么？

Answer 1

据我所知，您不能延迟ngIf触发器。但是您可以尝试使用动画模块来执行与组件渲染相关的动画。

https://angular.io/guide/animations