在Blazor(服务器)应用程序中加载和更改时淡入淡出图像

Question

我有一个Blazor服务器应用程序，它显示一个图像网格。我想让图像在显示时褪色。我目前正在使用CSS样式/动画：

.gridimage {
animation: fadeIn ease 1s;
}
<img class="gridimage" src="@ImageUrl">

这在初始页面加载时很好，但当用户更改筛选条件，图像网格发生变化时，我的@代码会更新@ImageUrl，并调用StateHasChanged，但渐变不会生效，因为图像已经加载。

我考虑过尝试一种不同的方法，在这里我定义了一种JS方法：

function fadeIn(obj) {
obj.style.transition = "opacity 1s";
obj.style.opacity = "1";
}

然后检测DOM更改，并在img src属性更改时触发fadeIn()调用，但这感觉有点像在与Blazor DOM更新模型作斗争。当我更新ImageUrl时，我也曾尝试过使用JSInterop，但同样，它看起来很混乱。

有更优雅的方法吗？

Answer 1

原来Brian Parker的答案是正确的；在项目中添加一个唯一的@key会导致CSS在页面转换和图像更新时重新触发——可能是因为Blazor认为<img @key=1234>项目与<img @key=1235>不同，因此迫使它重新评估CSS。