Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mikoskinen/Blazor.Animate
Easily add fade, slide and zoom-effects into your Blazor applications.
https://github.com/mikoskinen/Blazor.Animate
animate animation blazor
Last synced: 2 days ago
JSON representation
Easily add fade, slide and zoom-effects into your Blazor applications.
- Host: GitHub
- URL: https://github.com/mikoskinen/Blazor.Animate
- Owner: mikoskinen
- License: mit
- Created: 2019-11-04T16:02:04.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-18T00:17:46.000Z (over 1 year ago)
- Last Synced: 2024-11-07T06:08:32.804Z (8 days ago)
- Topics: animate, animation, blazor
- Language: C#
- Homepage:
- Size: 396 KB
- Stars: 282
- Watchers: 12
- Forks: 37
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Now part of Blazorise
Starting from the 2020/12/1, Blazor.Animate is now proud to be part of the Blazorise: https://github.com/stsrki/Blazorise. All the updates and future work for Blazor.Animate will continue through Blazorise.
# Blazor.Animate
Easily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the excellent [AOS-library](https://michalsnik.github.io/aos/).
Blazor.Animate is an animation component for Blazor. With Blazor.Animate you can animate how other components are brought to the view. You can easily add fade, slide and zoom-effects and even add easing to the animations.
[](https://www.nuget.org/packages/BlazorAnimate/)
## Quick Start
To animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation:
```
```
## Getting Started
Few steps are required in order to use the library.
#### Add NuGet
```csharp
Install-Package BlazorAnimate
```
#### Configure _Imports.razor
```
...
@using BlazorAnimate
```
#### Add JS interop into _Host.cshtml
```
```
#### Use the Animate-component
```
```
## Sample
For a sample, please view http://animateblazorsamplessvc.azurewebsites.net/
The sample's source code is available from GitHub: https://github.com/mikoskinen/Blazor.Animate/tree/master/samples/BlazorAnimate.Sample
## Running animation manually
It's possible to run the animation manually. Please note that the animated component will be hidden until the animation is manually executed.
To animate component manually, first set the IsManual to true and also capture the reference to the component:
```
```
Then in code-behind, call Run-method to animate the component:
```
@code {
private Animate myAnim;
private void RunAnimation()
{
myAnim.Run();
}
}
```
The Manual.razor page in the sample illustrates this functionality.
## Animations
To define an animation, use the Animation-property of the Animate-component. The built-in animations are available from BlazorAnimate.Animations:
* Fade
* FadeIn
* FadeUp
* FadeDown
* FadeLeft
* FadeRight
* FadeUpRight
* FadeUpLeft
* FadeDownRight
* FadeDownLeft
* FlipUp
* FlipDown
* FlipLeft
* FlipRight
* SlideUp
* SlideDown
* SlideLeft
* SlideRight
* ZoomIn
* ZoomInUp
* ZoomInDown
* ZoomInLeft
* ZoomInRight
* ZoomOut
* ZoomOutUp
* ZoomOutDown
* ZoomOutLeft
* ZoomOutRight
Use Duration (TimeSpan) or DurationMs -property to define the duration of an animation.
Use Delay (TimeSpan) or DelayMs -property to define how long the animation is delayed before it is started.
## Available easings
To define an easing for the animation, use the Easing-property of the Animate-component. The built-in easings are available from BlazorAnimate.Easings:
* Linear
* Ease
* EaseIn
* EaseOut
* EaseInOut
* EaseInBack
* EaseOutBack
* EaseInOutBack
* EaseInSine
* EaseOutSine
* EaseInOutSine
* EaseInQuad
* EaseOutQuad
* EaseInOutQuad
* EaseInCubic
* EaseOutCubic
* EaseInOutCubic
* EaseInQuart
* EaseOutQuart
* EaseInOutQuart
## Configuring the defaults
ASP.NET Core's options can be used to define the default animation settings:
```
services.Configure(options =>
{
options.Animation = Animations.FadeDown;
options.Duration = TimeSpan.FromMilliseconds(100);
});
```
If no animation parameters is defined on the Animate-component, the defaults are used:
```
Hello, world!
```
## Named configurations
Blazor.Animate 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("my", options =>
{
options.Animation = Animations.FadeDown;
options.Duration = TimeSpan.FromSeconds(2);
});
services.Configure(options =>
{
options.Animation = Animations.FadeDown;
options.Duration = TimeSpan.FromMilliseconds(100);
});
```
To use a named configuration, provide the OptionsName-parameter:
```
Hello, world!
```
## Authors
Blazor.Animate is created by [Mikael Koskinen](https://mikaelkoskinen.net).
Contributions are welcome!
## License
Blazor.Animate is MIT licensed. The library uses the following other libraries:
* [AOS](https://michalsnik.github.io/aos/): MIT-license