ExpressionChangedAfterItHasBeenCheckedError with animation

Question

I have created an animation for fading in/out an image when its src changes. When I quickly switch between images (before the animation is done), I get the following error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 
Previous value: 'src: http://localhost/wp-content/uploads/2018/11/billede1.jpg'. 
Current value: 'src: http://localhost/wp-content/uploads/2018/11/billede2.jpg'

Visually, there is nothing wrong though. The animations are working properly and the correct images are showing up - even when I switch between them quickly and the error gets printed. I would like to get rid of the error though. Any ideas about how I can do that?

Animation:

imageAnimation = trigger('imageAnimation', [
    state('in', style({opacity: 1, })),
    state('out', style({opacity: 0, })),
    transition('in <=> out', [
        animate('0.25s ease')
    ])
])

HTML:

  <div id="main-image-container" (mousemove)="displayBars()" [style.cursor]="mouseMovement ? 'default' : 'none'">
    <img id="main-image" src="{{displayedImage}}" [@imageAnimation]="imgState" (@imageAnimation.done)="onImageAnimationDone($event)">
  </div>
  <div id="bottom-bar">
    <div class="img-container" *ngFor="let img of gun.images">
        <img src="{{img.thumbnail_image_url}}" [class.selected]="img.full_image_url == selectedImage" (click)="setSelectedImage(img.full_image_url)">
    </div>
  </div>

Component:

  onImageAnimationDone(event: any){
    this.displayedImage = this.selectedImage;
    this.imgState = "in";
  }

  setSelectedImage(url: string){
    if(url != this.selectedImage){
      this.imgState = "out";
      this.selectedImage = url;
    }
  }

Stackblitz: https://stackblitz.com/edit/angular-hg13qq