在Angular 4中设置图像交换动画（AngularJS中的ng-animate-swap）

Question

我想在角度4应用程序中设置图像交换动画。当控制器替换img src属性时，旧图像应逐渐消失并显示新图像。

在AngularJS中，可以通过ng-animate-swap更改不透明度。但是，Angular 4似乎不支持动画交换。如何在没有交换触发的情况下实现这一目标？

我已尝试将过渡从void添加到*并返回src属性，但这不能按预期工作。第一个图像是动画的，之后交换发生时没有动画。

@Component({
  selector: 'app-play-card',
  template: '<div (click)="loadImg()"><img [@fade]="imgsrc" src="{{ imgsrc }}" /></div>',
  styleUrls: ['./play-card.component.css'],
  animations: [
    trigger('fade', [
      transition('void => *', [
        style({opacity: 0.1}),
        animate(5000, style({opacity: 1}))
      ]),
      transition('* => void', [
        style({opacity: 0.9}),
        animate(5000, style({opacity: 0}))
      ])
    ])
  ]
})