Blazor Host binding workaround

Suraj Yadav 1 Reputation point
2020-11-29T03:57:17.603+00:00

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.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,209 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,404 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Rena Ni - MSFT 2,061 Reputation points
    2020-11-30T08:05:15.453+00:00

    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

    43556-capture.png

    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

    0 comments