a Blazor component based on animate.css to easly animate your content
To animate a component, wrap it inside Animation component and use the Effect parameter to define the animation:
<Animation Effect="@Effect.BounceOutUp" Speed="@Speed.Fast">
<h1>Hello, world!</h1>
</Animation>
Few steps are required in order to use the library.
Install-Package BlazorAnimation
...
@using BlazorAnimation
<script src="_content/BlazorAnimation/blazorAnimationInterop.js"></script>
...
builder.Services.Configure<AnimationOptions>(Guid.NewGuid().ToString(),c=>{});
<Animation Effect="@Effect.BounceOutUp" Speed="@Speed.Fast" Delay="@Delay.None" IterationCount="2">
<h1>Hello, world!</h1>
</Animation>
For a sample, please view http://blazoranimation.boudoux.fr
Here's are the parameters to configure the component
Parameter Name | Abstract | Default |
---|---|---|
Effect | Define the effect to use for animate the component. | @Effect.Bounce |
Delay | The time to wait before the animation begin. | @Delay.None |
Speed | The total animation duration. | @Speed.Slow |
IterationCount | the number of times the animation will be played. For an infinite loop, you can set a negative number. | 1 |
Enabled | You can enable or disable the animation component by code with this parameters. Very convenient in certain situations | True |
OnAnimationEnd | Call a method when the animation end. | null |
Class | Append some css classes to the component | string.Empty |
Style | Append some css styles to the component | string.Empty |
Define the effect to use for animate the component.
You can use one of the 90 animations provided by the animate.css class. Just use the @Effect
into the Effect
parameters to list them all.
Example
<Animation Effect="@Effect.Jello">
<h1>Hello !</h1>
</Animation>
The time to wait before the animation begin.
You can use one of the 6 predefined delay by using the @Delay
enumeration that contains :
- None
- OneSecond
- TwoSeconds
- ThreeSeconds
- FourSeconds
- FiveSeconds
Example :
<Animation Effect="@Effect.Jello" Delay="@Delay.OneSecond">
<h1>Hello !</h1>
</Animation>
Or just define your own time manualy with a TimeSpan
like below :
Example with custom time :
<Animation Effect="@Effect.Jello" Delay="@TimeSpan.FromMilliseconds(250)">
<h1>Hello !</h1>
</Animation>
the total time of the animation from the time when the delay has elapsed.
You can use one of the 4 predefined speed by using the @Speed
enumeration that contains :
- Slow (2s)
- Slower (3s)
- Fast (800ms)
- Faster (500ms)
<Animation Effect="@Effect.Jello" Speed="@Speed.Fast">
<h1>Hello !</h1>
</Animation>
Or just define your own time manualy with a TimeSpan
like below :
Example with custom time :
<Animation Effect="@Effect.Jello" Speed="@TimeSpan.FromSeconds(1)">
<h1>Hello !</h1>
</Animation>
the number of times the animation will be played. For an infinite loop, you can set a negative number.
Example :
<Animation Effect="@Effect.Jello" IterationCount="5">
<h1>Hello !</h1>
</Animation>
Exemple with infinite loop :
<Animation Effect="@Effect.Jello" IterationCount="-1">
<h1>Hello !</h1>
</Animation>
Notice that an IterationCount defined to 0 do not play the animation.
Provide a way to enable or disable animation by code. This can be useful for certain scenarios like animating based on events (mouse, keyboard, ...) or to react to actions in a flux architectural pattern.
Example
<Animation Effect="@Effect.BounceOutUp" Enabled="RunAnimation">
<h1 @onmouseover="MouseOver" @onmouseout="MouseOut">Hello, world!</h1>
</Animation>
@code{
private bool RunAnimation = false;
private void MouseOver() => RunAnimation = true;
private void MouseOut() => RunAnimation = false;
}
Call a method when the animation end.
Example
<Animation Effect="@Effect.BounceOutUp" Enabled="RunAnimation" Speed="@Speed.Slower" OnAnimationEnd="AnimationEnd">
<h1 @onmouseover="MouseOver" >Hello, world!</h1>
</Animation>
@code{
private bool RunAnimation = false;
private void MouseOver() => RunAnimation = true;
private void AnimationEnd() => RunAnimation = false;
}
This property can be accessed with CascadingValue
For example, imagine you create an InputPassword
component like this :
<Animation Effect="@Effect.Shake" Speed="@Speed.Fast" Enabled="@Shake">
<input type="password" class="form-control" @bind-value="@Password" placeholder="Enter your password" />
</Animation>
@code {
[Parameter]
public bool Shake { get; set; }
public string Password { get; set; }
}
and you use it in a page :
<InputPassword @ref="inputPassword" Shake="NotifyBadPassword" />
<button @onclick="OkClicked">OK</button>
@code {
InputPassword inputPassword;
bool NotifyBadPassword = false;
private void OkClicked()
{
if (inputPassword.Password != "test")
NotifyBadPassword = true;
}
}
The expected behavior is to shake the input when the password is wrong. But when you run the application, you notice that the animation run only the first time.
The best way to resolve this issue is to pass the NotifyBadPassword
to false when the animation end. This can be achieved with a cascading value like this :
<CascadingValue Name="OnAnimationEnd" Value="@EventCallback.Factory.Create(this,AnimationEnd)">
<InputPassword @ref="inputPassword" Shake="@NotifyBadPassword" />
</CascadingValue>
<button @onclick="OkClicked">OK</button>
@code {
InputPassword inputPassword;
bool NotifyBadPassword = false;
private void OkClicked()
{
if (inputPassword.Password != "test")
NotifyBadPassword = true;
}
private void AnimationEnd()
{
NotifyBadPassword = false;
}
}
BlazorAnimation supports named animation settings through the ASP.NET Core's named options. Here's an example where two configurations are provided, one without a name (the defaults) and one with a name:
services.Configure<AnimationOptions>("bounce", o =>
{
o.Effect = Effect.BounceInLeft;
o.Speed = Speed.Faster;
o.Delay = TimeSpan.FromMilliseconds(200);
o.IterationCount = 2;
});
services.Configure<AnimationOptions>(o => {
o.Effect = Effect.FadeOutDown;
o.Speed = Speed.Slow;
});
To use a named configuration, provide the OptionsName parameter:
<Animation OptionsName="bounce">
<h1>Hello, world!</h1>
</Animation>
BlazorAnimation is created by Aurelien BOUDOUX.
Contributions are welcome!
BlazorAnimation is MIT licensed. The library uses the following other libraries:
- Animate.css: MIT-license
2 december 2021 - v2.1.0
- Add
Class
andStyle
Attributes Effect
can be compared by using equal sign (==)
7 may 2020 - v2.0.0
- Upgrade to animate.css v4