在Blazor服务器端中显示更改的地方

Question

我有一个传感器列表，当新数据从传感器到达时，我希望列表条目突出显示/刷新一秒钟左右。通过闪烁，将通知用户传感器数据已更改。

传感器数据到达event内，并且UI刷新将由StateHasChanged触发。

一些想法：我有个主意是创建一个具有传感器数据和HasChanged属性的新类，但是我想使用MatBlazorTables，它使用foreach渲染后无法再次将HasChanged更改为false。我想到的第二个想法是创建两个列表，一个带有“旧”数据，另一个带有新到达的数据，然后剃刀组件看起来在哪里进行了更改。

是否有更简单，更清洁的解决方案，也许已经嵌入到我尚未发现的Blazor中？

Answer 1

最简单的方法是使用CSS动画-无需C＃或JS代码！ （免责声明：我不是CSS专家！）

动画可以定义为特定的持续时间和重复。将项目添加到Blazor列表时，Blazor通过差异添加它们，因此现有项目不会更改，因此不会触发新项目的动画。

我在此处创建了一个演示：https://blazorfiddle.com/s/0qj50sch

示例