Blazor .Net + Dispatcher.BeginInvoke( )？

Question

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

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

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

例如：第一行首先开始淡入。第N排最后一个淡入。

我试过的 我已经使用 Task.Delay() 尝试了一些事情并试图让 Dispatcher.BeginInvoke() 工作。

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

Is this kind of effect even possible via Blazor? Is there a Dispatcher.BeginInvoke() equivalent?

Answer 1

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

我将基于默认的Blazor（.NET core 3.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 table。

首先我们将样式 class 添加到 table 行 <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 模型和个人剃须刀页面。当然动画、延迟等只是一个例子，可以自定义。

Blazor .Net + Dispatcher.BeginInvoke( )？

Blazor .Net + Dispatcher.BeginInvoke( )?

.net

.net-core

dispatcher

begininvoke

blazor