Security News
The Risks of Misguided Research in Supply Chain Security
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
github.com/aboudoux/blazoranimation
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 :
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 :
<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:
2 january 2023 - v 2.2
OnAnimationEnd
is triggered for element only2 december 2021 - v 2.1
Class
and Style
AttributesEffect
can be compared by using equal sign (==)7 may 2020 - v 2.0
FAQs
Unknown package
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.