DEV Community

Cover image for How to implement Declaretive List Animation in Blazor
Le-nn
Le-nn

Posted on

How to implement Declaretive List Animation in Blazor

Blazor requires a little ingenuity to animate list deletions and additions.
The same is true for React, but it can be achieved relatively easily and declaratively by using the react-transition-group library.

react-transition-group
https://github.com/reactjs/react-transition-group

Animations are very important for a better UI/UX.
However, it is also troublesome to have long code for animations, and to have no separation between View and Model.
Currently, there are no libraries that provide the same functionality as react-transition-group.
Therefore, I decided to create our own Blazor library to provide the same features as react-transition-group.

What I made

I have created a library to realize list animations in Blazor.
It makes it easy to implement animations such as the following.

Exposes a simple component that helps define the start and end of transitions.
It does not animate the styles by itself.
Instead, it exposes transition stages, manages classes and group elements, and manipulates the DOM in a convenient way to make the actual implementation of visual transitions easier.

Image description

See the Github Repository below for more information
(And star me ⭐⭐⭐)

https://github.com/le-nn/blazor-transition-group

Top comments (0)