.Net + Dispatcher.BeginInvoke( )？

Question

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

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

想要的结果，，我想要显示每个人淡出-独立于彼此。

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

--我尝试了--我尝试了几种使用Task.Delay()的方法，并尝试让Dispatcher.BeginInvoke()工作。

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

这种效果甚至可以通过Blazor实现吗？是否存在Dispatcher.BeginInvoke()等效项？

Answer 1

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

我将根据默认的Blazor (.NET Core3.0预览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>();

作为最后一步，我们将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模型和单独的剃须刀页面。当然，动画、延迟等只是一个例子，可以定制。