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

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。kontenurban正在寻找来自信誉良好的来源的答案。

我有可能解决所有这些错误，但是有没有办法延迟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中使用动画回调事件。请参见此处的官方角度文档：AnimationEvent。Stackblitz示例：https://stackblitz.com/edit/angular-ivy-y5momt