question

MeSurajYadav avatar image
0 Votes"
MeSurajYadav asked RenaNi-MSFT edited

Blazor Host binding workaround

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.

dotnet-aspnet-core-generaldotnet-aspnet-core-blazor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

RenaNi-MSFT avatar image
0 Votes"
RenaNi-MSFT answered RenaNi-MSFT edited

Hi @MeSurajYadav,

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






capture.png (11.2 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.