Blazor .Net + Dispatcher.BeginInvoke()？

Question

是否可以使用新的 Blazor 框架执行以下操作？

我有一个显示人员列表的页面。该列表本质上是一个可绑定的 Person 对象列表。

期望的结果 我想显示每个人彼此独立淡入。

例如：第一行首先开始淡入。第 N 行的人将是最后一个淡入的人。

我尝试了什么 我使用 Task.Delay() 尝试了几件事，并试图让 Dispatcher.BeginInvoke() 工作。

但现在我开始认为，如果不进行某种 hack，这是不可能的。

这种效果甚至可以通过 Blazor 实现吗？有没有 Dispatcher.BeginInvoke() 等效？

Answer 1

如果您的Blazor 应用程序在客户端运行，一个选项是使用CSS3 animations 的组合淡入行和Task.Delay 的组合来延迟添加行。

我会根据默认的Blazor（.NET core 3.0 preview 3）模板给大家举个例子。

受this SO answer 的启发，您可以将以下CSS class 添加到您的site.css 或一些自定义CSS 文件中：

.fadein {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

现在我们将修改 FetchData.razor 页面，该页面默认显示带有一些预测信息的 HTML 表。

首先我们为表格行<tr>添加一个样式类，如下所示：

@foreach (var forecast in forecasts)
{
    <tr class="fadein">
        <td>@forecast.Date.ToShortDateString()</td>
        <td>@forecast.TemperatureC</td>
        <td>@forecast.TemperatureF</td>
        <td>@forecast.Summary</td>
    </tr>
}

接下来我们将forecasts的类型从array更改为List：

List<WeatherForecast> forecasts = new List<WeatherForecast>();

作为最后一步，我们将 OnInitAsync 中的 forecasts 准备替换为以下调用：

protected override async Task OnInitAsync()
{
    await FadeInItems();
}

并添加延迟淡入的方法：

private async Task FadeInItems()
{
    var items = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");

    // don't forget to use the desired sorting / filtering on your collection
    foreach (var item in items)
    {
        forecasts.Add(item);
        base.StateHasChanged();
        await Task.Delay(500);
    }
}

这应该是你的结果：

基于此演示，您现在应该能够将此方法应用于您的Person 模型和单个剃须刀页面。当然动画、延迟等只是一个例子，可以自定义。