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?