How to animate state transitions in Blazor?

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

I can see how this can be achieved when adding a component, by the component having a CSS class that has a fade in animation that occurs when the component renders - e.g. as shown in Chris Sainty's excellent toast example

Animating removing a component

I can't think how you would do that when removing a component, because the component simply stops existing when that part of the DOM re-renders?

React has react-transition-group that deals with the period of transition, but I can't find anything similar in Blazor as of yet?

Is there any way to do add an animation for the removal of a component in Blazor?

Animating Page Transitions

The other often-animated state-transition is changing 'pages'. Again, I can't find way to do that in Blazor at present? Effectively that can just be an animation for removing the old page component and another for adding the new one, but in some frameworks that's done at the routing level rather than the component level - I can't find anything at either level in Blazor at present?

Answer 1

Blazor doesn't cover this scenario, for this, you would need to use CSS. It's hard to give you a specific example as it depends on exactly how you want your animations to work and with what kind of style but I would suggest checking out CSS transitions and keyframes.

Here are some good resources

• 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/

As you mentioned in your question handling items being removed is something I've not been able to figure out just yet. So I can't help with that unfortunately.

Answer 2

For the component removal side of things:

I added a GitHub feature request for removing on the AspNetCore repository. Microsoft's Steve Sanderson has outlined that animating component removal should already be possible with the API the Blazor framework exposes, but it would probably benefit from someone writing a package to make it simpler to implement:

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.

dazinator / @Darrell has taken that on and produced the Blazor Deferred Remove Nuget package to do that. I haven't tried that yet, but it looks like what's needed to achieve this.

There's now also the Blazor.Animate package.