Blazor .Net + Dispatcher.BeginInvoke（）？

Question

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

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

所需结果 我想展示每个人彼此独立的淡入淡出。

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

我尝试过的事情 我已经使用Task.Delay（）尝试了几件事，并试图使Dispatcher.BeginInvoke（）正常工作。

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

  

通过Blazor还能实现这种效果吗？有没有   等价于Dispatcher.BeginInvoke（）？

Answer 1

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

我将基于默认的Blazor（。NET Core 3.0预览版3）模板为您提供示例。

受this SO answer的启发，您可以将以下CSS class添加到您的 site.css 或某些Costom 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>();

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

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模型和单个剃刀页面。当然，动画，延迟等仅是示例，可以自定义。