3

I'm having a simple picture element with three sizes.

<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>

This image is at the top of the application. When the user navigates to a new subpage, the image changes. Now this change can be delayed, because the image is quite big an takes some time to load. So I wanted to add a simple animation, e.g. a fadeout -> fadein, whenever the image changes. The example in https://angular.io/guide/animations defines states, when which animation is triggered, but I want an animation, whenever the property changes. How can I achieve that?

Stefan
  • 14,826
  • 17
  • 80
  • 143

0 Answers0