Introduce the concept of state transitions in Blazor to allow for e.g. animations

Is your feature request related to a problem? Please describe.

Following on from my StackOverflow question…

In my Blazor components I often render components based on either a conditional statement, e.g.

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

Or from a loop, e.g.

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

When I change the state I’d like to animate the state transition so that the components fade in/out. In the examples above that might happen when IsCustomer changes, or when a record is added or removed from the SalesOrders collection.

Animating adding a component can be done with CSS, but I think that animating the removal of a component will be impossible because it simply doesn’t exist in the next render, so there’s nothing to hang the animation onto?

Describe the solution you’d like

In React there used to be a series of attributes related to state transitions, which now seem to have been replaced by react-transition-group. That looks like a big hammer for what seems like a fairly small nut.

Ideally I’d favour something really simple to use, like having an on-removal-class attribute for the name of a CSS class that’s then added to the component, and allowed to complete, when the item is identified for removal from the render tree. That seems like it may be possible, because if I understand Blazor correctly the new and old render trees are diff’d to work out what parts to re-render?

There are potentially lots of other things you might want to happen in a state transition too, and no-doubt some that can’t be handled with CSS alone, but I think the animation side of things is fairly important to aid users in understanding the consequences of a particular UI interaction?

[dazinator]

I settled on the following solution to applying a transition to an element before removal, it’s not the greatest because I am using Task.Delay with a specified time in milliseconds which needs to match up o the duration of the transition specified in the css:

Reusable Transition.razor component;

<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);
}


}

and it’s used like so from a parent page or component:

       @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;
    }
}

and 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;       
    }
}

[SteveSandersonMS]

The solution I’d expect is to create an animator component that renders either a list or a single item, and incorporates logic to delay the removal of each item so it can be animated out. Blazor already has good primitives for templates components, so the resulting APIs should be pretty nice. This would be essentially the same solution that is used in other SPA frameworks.

This is achievable in user code and doesn’t require a built-in framework feature. I’m not saying it’s easy, but hopefully someone in the community will find time to do it. It’s something I may do myself at some point but have other priorities in the short term.