Blazor .Net + Dispatcher.BeginInvoke ()? - PullRequest
Новая
       42

Blazor .Net + Dispatcher.BeginInvoke ()?

1 голос
/ 03 мая 2019

Можно ли сделать следующее, используя новую платформу Blazor?

У меня есть страница, на которой отображается список людей. Этот список по сути является привязываемым списком объектов Person.

Желаемый результат Я хотел бы показать каждому человеку постепенное появление независимо друг от друга.

Например: 1-й ряд начинает исчезать первым. Человек из N-го ряда станет последним.

Что я пробовал Я попробовал несколько вещей, используя Task.Delay () и попытался заставить Dispatcher.BeginInvoke () работать.

Но теперь я начинаю думать, что это невозможно без какого-либо взлома.

Возможен ли такой эффект даже через Blazor? Есть ли Эквивалент Dispatcher.BeginInvoke ()?

1 Ответ

1 голос
/ 03 мая 2019

Один из вариантов, если ваше Blazor приложение запускается на стороне клиента, - это использовать комбинацию CSS3 animations для затухания в строках и Task.Delay для добавления задержанных строк.

Я приведу пример на основе шаблона Blazor (.NET core 3.0 preview 3) по умолчанию.

Вдохновленный этим SO-ответом , вы можете добавить следующие 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);
    }
}

И это должен быть ваш результат: fade in animation

На основе этой демонстрации вы теперь сможете применить этот метод к вашей модели Person и отдельным страницам бритвы. Конечно, анимация, задержка и другие вещи являются лишь примером и могут быть настроены.

...