在 Blazor 服务器端显示进行更改的位置
In Blazor Server Side show where changes were made
我有一个传感器列表，一旦新数据从传感器到达，我希望列表条目到 highlight/flash 一秒钟左右。通过该闪光灯，用户将被告知传感器数据已更改。
传感器数据在 event 内到达，UI 刷新将由 StateHasChanged 触发。
一些想法：我想创建一个新的 class，其中包含传感器数据和 HasChanged 属性，但我想使用 MatBlazorTables 使用 foreach 我无法在渲染后再次将 HasChanged 更改为 false。我的第二个想法是创建两个列表，一个包含 "old" 数据，一个包含新到达的数据，然后 razor-component 会查找发生更改的位置。
是否有更简单、更清晰的解决方案，也许已经嵌入到我尚未发现的 Blazor 中？
实现此目的的最简单方法是使用 CSS 动画 - 无需 C# 或 JS 代码！ （免责声明：我不是 CSS 专家！）
动画可以定义为特定的持续时间和重复。当您将项目添加到 Blazor 列表时，Blazor 通过比较添加它们，因此现有项目 不会更改 因此不会触发新项目的动画。
我在这里创建了一个演示：https://blazorfiddle.com/s/0qj50sch
例子
我有一个传感器列表，一旦新数据从传感器到达，我希望列表条目到 highlight/flash 一秒钟左右。通过该闪光灯，用户将被告知传感器数据已更改。
传感器数据在 event 内到达，UI 刷新将由 StateHasChanged 触发。
一些想法：我想创建一个新的 class，其中包含传感器数据和 HasChanged 属性，但我想使用 MatBlazorTables 使用 foreach 我无法在渲染后再次将 HasChanged 更改为 false。我的第二个想法是创建两个列表，一个包含 "old" 数据，一个包含新到达的数据，然后 razor-component 会查找发生更改的位置。
是否有更简单、更清晰的解决方案，也许已经嵌入到我尚未发现的 Blazor 中？
实现此目的的最简单方法是使用 CSS 动画 - 无需 C# 或 JS 代码！ （免责声明：我不是 CSS 专家！）
动画可以定义为特定的持续时间和重复。当您将项目添加到 Blazor 列表时，Blazor 通过比较添加它们，因此现有项目 不会更改 因此不会触发新项目的动画。
我在这里创建了一个演示：https://blazorfiddle.com/s/0qj50sch
例子