https://github.com/aboudoux/BlazorAnimation
a Blazor component based on animate.css to easly animate your content
https://github.com/aboudoux/BlazorAnimation
Last synced: 5 months ago
JSON representation
a Blazor component based on animate.css to easly animate your content
- Host: GitHub
- URL: https://github.com/aboudoux/BlazorAnimation
- Owner: aboudoux
- License: mit
- Created: 2020-03-07T17:35:05.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-14T13:56:07.000Z (over 1 year ago)
- Last Synced: 2024-04-27T07:30:39.099Z (12 months ago)
- Language: C#
- Homepage:
- Size: 6.17 MB
- Stars: 124
- Watchers: 4
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - BlazorAnimation -   A Blazor component based on animate.css to easly animate your content. [Demo](http://blazoranimation.boudoux.fr/). (Libraries & Extensions / 2D/3D Rendering engines)
README
# BlazorAnimation
a Blazor component based on animate.css to easly animate your content
## Quick Start
To animate a component, wrap it inside Animation component and use the Effect parameter to define the animation:
```
Hello, world!
```
## Getting Started
Few steps are required in order to use the library.
#### Add NuGet
```csharp
Install-Package BlazorAnimation
```
#### Configure _Imports.razor
```
...
@using BlazorAnimation
```
#### Add JS interop into _Host.cshtml
```
```
#### If you notice any error in blazor wasm, add a configuration in program.cs
```
...
builder.Services.Configure(Guid.NewGuid().ToString(),c=>{});
```
#### Use the Animation component
```
Hello, world!
```
## Sample
For a sample, please view http://blazoranimation.boudoux.fr
## Parameters
Here's are the parameters to configure the component
|Parameter Name| Abstract | Default |
|--|--|--|
| [Effect](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#effect) | Define the effect to use for animate the component. | @Effect.Bounce |
| [Delay](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#delay) | The time to wait before the animation begin. | @Delay.None
| [Speed](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#speed) | The total animation duration. | @Speed.Slow
| [IterationCount](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#iterationcount) | the number of times the animation will be played. For an infinite loop, you can set a negative number. | 1
| [Enabled](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#enabled) | You can enable or disable the animation component by code with this parameters. Very convenient in certain situations| True
| [OnAnimationEnd](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#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
### Effect
Define the effect to use for animate the component.
You can use one of the 90 animations provided by the [animate.css class](https://animate.style/). Just use the `@Effect` into the `Effect` parameters to list them all.
Example
```
Hello !
```
### Delay
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 :
```
Hello !
```
Or just define your own time manualy with a `TimeSpan` like below :
Example with custom time :
```
Hello !
```
### Speed
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)
```
Hello !
```
Or just define your own time manualy with a `TimeSpan` like below :
Example with custom time :
```
Hello !
```
### IterationCount
the number of times the animation will be played. For an infinite loop, you can set a negative number.
Example :
```
Hello !
```
Exemple with infinite loop :
```
Hello !
```
> Notice that an IterationCount defined to 0 do not play the animation.
### Enabled
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
```
Hello, world!
@code{
private bool RunAnimation = false;
private void MouseOver() => RunAnimation = true;
private void MouseOut() => RunAnimation = false;
}
```
### OnAnimationEnd
Call a method when the animation end.
Example
```
Hello, world!
@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 :
```
@code {
[Parameter]
public bool Shake { get; set; }
public string Password { get; set; }
}
```
and you use it in a page :
```
OK
@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 :
```
OK
@code {
InputPassword inputPassword;
bool NotifyBadPassword = false;
private void OkClicked()
{
if (inputPassword.Password != "test")
NotifyBadPassword = true;
}
private void AnimationEnd()
{
NotifyBadPassword = false;
}
}
```
## Named configurations
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("bounce", o =>
{
o.Effect = Effect.BounceInLeft;
o.Speed = Speed.Faster;
o.Delay = TimeSpan.FromMilliseconds(200);
o.IterationCount = 2;
});
services.Configure(o => {
o.Effect = Effect.FadeOutDown;
o.Speed = Speed.Slow;
});
```
To use a named configuration, provide the OptionsName parameter:
```
Hello, world!
```
## Authors
BlazorAnimation is created by [Aurelien BOUDOUX](http://aurelien.boudoux.fr).
Contributions are welcome!
## License
BlazorAnimation is MIT licensed. The library uses the following other libraries:
* [Animate.css](https://github.com/daneden/animate.css): MIT-license
## ChangeLog
2 january 2023 - v 2.2
- `OnAnimationEnd` is triggered for element only
2 december 2021 - v 2.1
- Add `Class` and `Style` Attributes
- `Effect` can be compared by using equal sign (==)
7 may 2020 - v 2.0
- Upgrade to animate.css v4