title: Fade images when loaded and changed in Blazor (server) app
body: <p>I've got a Blazor server app which displays a grid of images. I want to have the images fade when they're displayed. I'm currently using a CSS style/animation:</p>
  <pre><code>.gridimage {
      animation: fadeIn ease 1s;
  }
  
  &lt;img class=&quot;gridimage&quot; src=&quot;@ImageUrl&quot;&gt;
  </code></pre>
  <p>This works fine on initial page load - but when a user changes a filter criteria and the grid of images changes, my @code updates the <code>@ImageUrl</code> and I call <code>StateHasChanged</code>, but the fade doesn't kick in, because the image has already loaded.</p>
  <p>I've thought about trying a different approach, where I define a JS method:</p>
  <pre><code>function fadeIn(obj) {
              obj.style.transition = &quot;opacity 1s&quot;;
              obj.style.opacity = &quot;1&quot;;
          }
  </code></pre>
  <p>and then detect DOM changes and trigger that <code>fadeIn()</code> call when the img src attribute changes, but that feels kindof like fighting with the Blazor DOM update model. I've also toyed with using JSInterop when I update <code>ImageUrl</code> but again, it seems messy.</p>
  <p>Is there a more elegant way to do it?</p>