Как оживить переходы состояния в Blazor?

Question

В моих компонентах Blazor я часто визуализирую компоненты на основе условного оператора, например,

@if (_contact.IsCustomer)
{
    <SalesOrdersList Customer="@_contact" />
}

или из цикла, например,

@foreach(var salesOrder in _customer.SalesOrders)
{
    <SalesOrderSummary SalesOrder="@salesOrder" />
}

Когда я изменяю состояние, я 'Я хотел бы анимировать переход состояния так, чтобы компоненты постепенно исчезали.В приведенных выше примерах это может произойти при изменении IsCustomer или при добавлении или удалении записи из коллекции SalesOrders.

Анимация при добавлении компонента

Я вижу, как этого можно достичь при добавлении компонента, с помощью компонента, имеющего класс CSS, который имеет затухание анимации, которое происходит при рендеринге компонента, напримеркак показано в Прекрасный пример тоста Криса Сэйнти

Анимация удаления компонента

Я не могу думать, как вы это сделаете при удалении компонента, потому что компонент просто останавливаетсясуществует, когда эта часть DOM повторно рендерится?

React имеет реагирующая группа перехода , которая имеет дело с переходным периодом, но я не могу найти ничего подобного в Blazor сеще?

Есть ли способ добавить анимацию для удаления компонента в Blazor?

Анимация переходов страниц

Другой, часто анимированный переход состояния - это изменение «страниц».Опять же, я не могу найти способ сделать это в Blazor в настоящее время?По сути, это может быть просто анимация для удаления старого компонента страницы и другого для добавления нового, но в некоторых средах это делается на уровне маршрутизации, а не на уровне компонента - в настоящее время я не могу найти ничего на любом уровне в Blazor

Answer 1

Blazor не охватывает этот сценарий, для этого вам нужно будет использовать CSS. Трудно привести конкретный пример, так как он зависит от того, как именно вы хотите, чтобы ваша анимация работала, и от какого стиля, но я бы посоветовал проверить CSS-переходы и ключевые кадры.

Вот несколько хороших ресурсов

• https://www.w3schools.com/css/css3_transitions.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• https://css -tricks.com / almanac / properties / t / transition /

Как вы упомянули в своем вопросе, удаление элементов - это то, что я пока не смог понять. Так что я не могу с этим помочь, к сожалению.

Answer 2

Я остановился на следующем подходе к обработке исчезновения элемента, прежде чем он будет удален блейзором из DOM. Это обходной путь, который использует Task.Delay, и компромисс заключается в том, что, поскольку я использую Task.Delay с указанным временем в миллисекундах, это время должно совпадать с продолжительностью, которую вы используете в css для перехода - в противном случае элемент может быть удален с помощью blazor до (или после) перехода завершено:

Многоразовый компонент Transition.razor:

    <div class="@(ToggleActive ? ToggleTransitionOnCssClassName: ToggleTransitionOffCssClassName)">
        @ChildContent;
    </div>

    @code {

    [Parameter] RenderFragment ChildContent { get; set; }

    [Parameter] string ToggleTransitionOnCssClassName { get; set; } = "";
    [Parameter] string ToggleTransitionOffCssClassName { get; set; } = "";

    [Parameter] int TransitionDurationMilliseconds { get; set; } = 200;

    public bool ToggleActive { get; set; }

    [Parameter] EventCallback<bool> TransitionEnded { get; set; }

    public async Task ToggleTransition()
    {
        ToggleActive = !ToggleActive;
        await Task.Delay(TransitionDurationMilliseconds);
        await TransitionEnded.InvokeAsync(ToggleActive);
    }


    }

и используется так же с родительской страницы или компонента:

         @if (RenderThingy)
        {
            <Transition @ref="Transition" TransitionDurationMilliseconds="500" ToggleTransitionOnCssClassName="m-fadeOut" ToggleTransitionOffCssClassName="m-fadeIn" TransitionEnded="@TransitionComplete">
                <RenderThingy OnDismissed="@OnDismissed"></RenderThingy>
            </Transition>
        }

@code {

    Transition Transition { get; set; }
    bool RenderThingy {get; set;} = true;

    async Task OnDismissed()
    {
        await Transition.ToggleTransition();
    }
    private void TransitionComplete(bool toggleState)
    {
        RenderThingy = false;
    }
}

и css:

.m-fadeIn {
    visibility: visible;
    opacity: 1;
    animation: fadein 500ms;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.m-fadeOut {
    animation: fadeout 500ms;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;       
    }
}

Answer 3

С точки зрения удаления компонентов:

В соответствии с ответом Криса Сэйнти, не похоже, что есть какой-либо способ адресации или обработки удаления компонентов из дерева визуализации / DOM в настоящее время.

Я добавил. Я добавил запрос GitHub для этого в хранилище AspNetCore, я обновлю этот ответ, если это произойдет.