How to implement Declaretive List Animation in Blazor

Le-nn — Mon, 27 Feb 2023 17:32:53 +0000

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.

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

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

[Joke extension] Make your vscode an aquarium and heal you !

Le-nn — Thu, 10 Nov 2022 02:03:50 +0000

VSCode Vector Aquarium

I introduce my joke extension for vscode.
It makes your vscode cute aquarium and heal you !

Here is Github repository.
https://github.com/le-nn/vscode-vector-aquarium

Install

Search vscode-vector-aquarium in your vscode extension tab or install from following url.

https://marketplace.visualstudio.com/items?itemName=le-nn.vscode-vector-aquarium

Features

When tapped, bait appears and fish will chase and eat it.
When fish tapped, fish will diffuse and escape.
Other creature will swim.
Grouped fish swim in swarm

How it works

Swarm of fish is implemented with boid algorithm.
https://en.wikipedia.org/wiki/Boids

Draw and movement logic is here.
https://github.com/le-nn/vscode-vector-aquarium/tree/main/src/webview/libs

Usage

Open extension tab.

View on secondary side bar

Enable secondary side bar from

View > Appearance > Secondary Side Bar

.
Drag from primary side bar and drop Fish icon to secondary side bar in order to make side bar enabled.

Setting

Press F1 and input following command.

vscode-vector-aquarium.config

And setting file will open.
Here is example of settings.
The fish field represents a swarm of fish.
One child of array is one swarm. Its child field represents one fish.
The setting example is as the field name.

{
    "isFoodEnabled": true,
    "isRippleEnabled": true,
    "fish": [
        [
            {
                "color": "#3f51b5",
                "scale": 1,
                "location": {
                    "x": 0,
                    "y": 0
                }
            },
            {
                "color": "#3f51b5",
                "scale": 1,
                "location": {
                    "x": 0,
                    "y": 0
                }
            },
        ],
        [
            {
                "color": "#2196f3",
                "scale": 0.9,
                "location": {
                    "x": 0,
                    "y": 0
                }
            },
            {
                "color": "#2196f3",
                "scale": 1,
                "location": {
                    "x": 0,
                    "y": 0
                }
            }
        ]
    ],
    "jerryfish": [
        {
            "color": "#9c27b0",
            "scale": 1,
            "location": {
                "x": 340,
                "y": 120
            }
        },
        {
            "color": "#e91e63",
            "scale": 0.88,
            "location": {
                "x": 120,
                "y": 230
            }
        }
    ],
    "lophophorata": [
        {
            "color": "#3f51b5",
            "scale": 1,
            "location": {
                "x": 120,
                "y": 200
            }
        }
    ]
}

License

Designed with ♥ by le-nn. Licensed under the MIT License.

DEV Community: Le-nn