SAPBlazorAnimate

Animate.css Library for Blazor

Demo :

Usage

1. Add SAPBlazorAnimate To Your Project

PM> Install-Package SAPBlazorAnimate -Version 1.2.6

2. Include relevant stylesheet either in your _host.cshtml (server-side blazor) or index.html (client-side blazor)

<link href="_content/SAPBlazorAnimate/animate.min.css" rel="stylesheet" />

3. Add This Line in _imports.razor

@using SAPBlazorAnimate

---

Make elements animatable:

<SAPAnimate>
<h1> My Element</h1>
</SAPAnimate>

Define a refrence in @code section

@code{

SAPAnimate element1;

}

Set Refrence to SAPAnimate and map refrence class to element

<SAPAnimate @ref="element1" > 

<h1 class="@element1.Animator"> My Element</h1>

</SAPAnimate>

Animate element whenever you want , with buttn click or AfterRenderAsync

void btn1Click()
{

element1.Animate(AnimateBook.AttentionSeekers.HeartBeat);

}

Control Start Animation Speed With This Modes : Fast , Faster , Slow , Slower

void btn1Click()
{

element1.Animate(AnimateBook.AttentionSeekers.HeartBeat.Faster());

}

Direct Use For Elements On after page render (sample)

<h1 class="@AnimateBook.Flippers.Flip"> Hello World</h1>

OR with slow speed

<h1 class="@AnimateBook.Flippers.Flip.Slow()"> Hello World</h1>

---

License

Copyright (c) 2020 Soroush Asadi MIT License

Related projects

this project used Animate.css