角度5 - 过渡图像淡出服务器

Question

我有一个用于从服务器加载徽标的组件。它显示了每个图像中的加载微调器，同时图像以blob格式下载。我想为一个淡出的微调器制作动画，并在完成时淡入新的图像。

app.component.ts：

<app-Logotipo url="https://i.imgur.com/uHGYwT5.jpg" type="lista"></app-Logotipo>

Logotipo.component.ts：

@Component({
  selector: 'app-Logotipo',
  templateUrl: './Logotipo.component.html',
  styleUrls: ['./Logotipo.component.css']
})
export class LogotipoComponent implements OnInit {

  @Input() url: string;
  @Input() type: string;

  constructor(private data: DataService) { }

  logotipo: Logotipo;
  isImageLoading: boolean = true;
  imageStyle: Object = {};
  sizes: Object = {lista: {maxheight: "80px", maxwidth: "80px"}, suscripcion: {maxheight: "100px", maxwidth: "100px"}};

  ngOnInit() {
    this.loadLogotipoFromServer();
  }

  arrangeImageStyles(): void {
    if(this.logotipo.getHeight() > this.logotipo.getWidth()) {
      this.imageStyle = {width: 'auto', height: '100%', "max-height": this.sizes[this.type].maxheight};
    } else {
      this.imageStyle = {height: 'auto', width: '100%', "max-width": this.sizes[this.type].maxwidth};
    }
  }

  loadLogotipoFromServer() {
    let lgt = new Logotipo();
    this.isImageLoading = true;
    this.data.getLogotipo(this.url  ).subscribe(data => {
      lgt.createImageFromBlob(data,() => {
        this.arrangeImageStyles();
        this.isImageLoading = false;
      });
    }, error => {
      this.isImageLoading = false;
      console.log(error);
    });

    this.logotipo = lgt;
  }

}

Logotipo.component.html：

<img [src]="logotipo.base64" [ngStyle]="imageStyle" *ngIf="!isImageLoading; else loadingState">
<ng-template #loadingState>
    <img src="/assets/images/loading.gif" style="width: 100px; height: auto;"  alt="Cargando">
</ng-template>

如何实现这一转变？提前谢谢！