如何在图片元素中为srcset属性的变化设置动画？

Question

我有一个具有三种尺寸的简单图片。

<picture class="hero-intro-image">
  <source media="(max-width: 565px)" srcset="{{data.img780x480}}">
  <source media="(min-width: 576px and max-width: 767px)" srcset="{{data.img1280x480}}">
  <source media="(min-width: 768px)" srcset="{{data.img2560x480}}">
  <img src="/assets/imgs/introduction/clint-adair-2560x480.jpg" alt="Intro Image">
</picture>

此图像在应用程序的顶部。当用户导航到新的子页面时，图像会更改。现在可以延迟此更改，因为图像很大，需要花费一些时间来加载。所以我想添加一个简单的动画，例如每当图像改变时，淡入淡出->淡入淡出。 https://angular.io/guide/animations中的示例定义了何时触发动画的状态，但是每当属性更改时我都希望动画。我该如何实现？