Blazor Host binding workaround

Question

Have a great day too all of you.
Blazor is been considered as replacement for JavaScript but when I looked into it, it doesn't have access to DOM elements. Biggest blocker in considering C# as front end language. I want my website to have smooth animations on it and if I use blazor to create cool websites, I end up using lots of calls between C# and JavaScript, making it too slow and unnecessarily complex and it feels like plain mvc on the server side outputting json and only plain JavaScript on a client side would be simple.
Do we have some library or project examples somewhere which will teach me how to create simple websites with cool animations using blazor? (Just using blazor and plain JavaScript without any library would be my ideal choice.)
It would be of great help to me and other less experienced newbies.
Approach for animations of individual tag elements in a web page and still keep sanity of blazor lifecycle.

Answer 1

Hi @Suraj Yadav ,

I think you could use Blazor.Animate library.

1.Add NuGet

Install-Package BlazorAnimate -Version 3.0.0

Reference:

https://www.nuget.org/packages/BlazorAnimate/

2.Configure _Imports.razor

...  
@using BlazorAnimate  

3.Add JS interop into _Host.cshtml

4.Use the Animate-component,here I use ZoomIn animation,for other animations you could read the docs

<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(1)">  
    <Counter></Counter>  
</Animate>  

For more details,please read the following docs:

https://github.com/mikoskinen/Blazor.Animate#blazoranimate

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Rena