Introduce the concept of state transitions in Blazor to allow for e.g. animations
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 290
Description
### Is your feature request related to a problem? Please describe.
Following on from [my StackOverflow question](https://stackoverflow.com/questions/56219984/how-to-animate-state-transitions-in-blazor)...
In my Blazor components I often render components based on either a conditional statement, e.g.
```
@if (_contact.IsCustomer)
{
}
```
Or from a loop, e.g.
```
@foreach(var salesOrder in _customer.SalesOrders)
{
}
```
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](https://github.com/reactjs/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?
Contributor guide
Assessment
This issue has not been assessed yet.