载入图像时触发动画

Question

您可以在下面的gif中看到我的问题。当我的组件加载时，在ngOnInit中，一些图像URL是从数据库中获取的。完成后，将URL放置在图像的src中，并触发淡入动画。正如您在gif中看到的那样，当图像的容器可见时，不会加载图像。

我的问题是，一旦图像加载完成，是否有一种相当简单的方法来触发动画？我已经搜寻了一段时间，尝试了不同的方法，但是到目前为止，对我来说没有任何作用。

HTML：

  <div id="auctions" [@fadeAnimation]="recentAuctions.length">
    <ng-container *ngIf="!loadingAuctions; else loading">
      <div class="auction" *ngFor="let auction of recentAuctions">
        <img [src]="auction.images[0]">
        <p>{{auction.title}}</p>
        <p style="color: #ff9800;">{{auction.price | currency:'DKK':'code':'1.2-2':'da'}}</p>
        <p>{{auction.timeLeft.days}} dage,
          {{auction.timeLeft.hours}}:{{auction.timeLeft.minutes}}:{{auction.timeLeft.seconds}}</p>
      </div>
    </ng-container>
  </div>
</div>
<ng-template #loading>
  <mat-progress-spinner mode="indeterminate" diameter="75"></mat-progress-spinner>
</ng-template>

ngOnInit：

  ngOnInit() {
    this.firestore.collection<Auction>('open-auctions', ref => ref.orderBy("startDate", "desc").limit(5)).get().subscribe(res => {
      res.docs.forEach(doc => {
        let auction = <Auction>doc.data();
        this.setTimeLeft(auction);
        this.recentAuctions.push(auction);
        this.countdowns.push(
          interval(1000).subscribe(result => {
            this.setTimeLeft(auction)
            console.log(auction.title);
          })
        );
      })
      this.loadingAuctions = false;
    });
  }