在 Blazor 服务器端显示进行更改的位置答案

【问题标题】：In Blazor Server Side show where changes were made在 Blazor 服务器端显示进行更改的位置
【发布时间】：2020-05-02 04:31:00
【问题描述】：

我有一个传感器列表，一旦新数据从传感器到达，我希望列表条目突出显示/闪烁一秒钟左右。使用该闪光灯，用户将被告知传感器数据已更改。

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

一些想法：我想创建一个具有传感器数据和HasChanged 属性的新类，但是因为我想使用MatBlazorTables，它使用foreach，所以我无法更改@ 987654327@ 渲染后再次变为 false。我的第二个想法是创建两个列表，一个包含“旧”数据，一个包含新到达的数据，然后 razor-component 查找进行更改的位置。

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

【问题讨论】：

这听起来像是SignalR 可以帮助解决的问题。

标签： c# asp.net-core blazor blazor-server-side razor-components

【解决方案1】：

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

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

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

示例

【讨论】：

令人着迷，不知道这可以用纯 CSS 实现。问题是，我想在列表中的项目被更改时向用户显示，而不是添加项目。 CSS也可以吗？我用更改按钮更新了 blazorfiddle：blazorfiddle.com/s/hm4iw1up
@MaxR。对不起，我没有很好地阅读这个问题！是的，如果您有一个现有的项目列表，那么您需要将类添加到要闪烁的项目中。但是，这当然只会更新一次。我确实考虑过使用计时器来删除类，但有一种更简单的方法 - 有两个类（具有不同的名称）并在每次更新时在它们之间交换。示例：blazorfiddle.com/s/5m86vp64 - 它并不完美，但它可能具有适应性
有趣的是，chrome 上的 edge 似乎省略了 2. 类，因为它在浏览器中看起来是一样的（这实际上是真的），所以我们必须在一个类中改变一个小东西才能让它工作。我将 3. percantage 从 90% 设置为 89%。此外，我将类设置为td 而不是tr 元素，并将闪光灯背景设置为transparent，因此背景颜色保持不变。这一切看起来有点古怪和古怪，但它工作得很好，尽管我试图找到一个解决方案（如上所述）而不给我的课程添加额外的属性。谢谢！ blazorfiddle.com/s/440baf3h
@MaxR。是的，我在尝试时遇到了一些问题。可能是 Chrome 不喜欢在动画仍在运行时更改类..