anime.Blazor
0.9.6
dotnet add package anime.Blazor --version 0.9.6
NuGet\Install-Package anime.Blazor -Version 0.9.6
<PackageReference Include="anime.Blazor" Version="0.9.6" />
paket add anime.Blazor --version 0.9.6
#r "nuget: anime.Blazor, 0.9.6"
// Install anime.Blazor as a Cake Addin
#addin nuget:?package=anime.Blazor&version=0.9.6
// Install anime.Blazor as a Cake Tool
#tool nuget:?package=anime.Blazor&version=0.9.6
animejs interop with Blazor
Introduction
This is a Blazor library that wraps animejs. You can use the library in both client- and server-side projects. See the Getting Started, browse the samples for help.
Getting started
Installation
There's a NuGet package available: anime.Blazor
In case you prefer the command line:
Install-Package anime.Blazor
Usage
Assets
Before you can start creating an animation, you have to add some static assets to your project. These come bundled with anime.Blazor, so you only need to add a few lines to your Index.html
/_Host.cshtml
.
In your _Host.cshtml
(server-side) or in your index.html
(client-side) add the following lines to the body
tag after the _framework
reference
<script src="_content/anime.Blazor/animeBlazor.js"></script>
Imports
Now add a reference to anime.Blazor
in your _Imports.razor
@using anime.Blazor;
Usage example
// Create an instance of `Animation` class with a unique Id
Animation animation = new Animation(1);
// specifies the targets to animate
animation.Targets = new object[] { ".any-css-selector .el1" };
// sets the value for the needed the parameters,
// through setting available properties, like:
animation.Direction = Direction.reverse;
animation.Autoplay = true;
animation.Loop = 5;
// or
animation.AdditionalParameters = new Dictionary<string, object>
{
{ "translateX", 250 },
{ "delay", 500 },
{ "backgroundColor", "#4266f5"},
};
//for more info about the parameters see the original documintation of animejs library
// then call AnimateAsync with an instance of `Microsoft.JSInterop.IJSRuntime` to start the animation
await animation.AnimateAsync(JSRuntime);
// if the Autoplay was set to false you can call `PlayAsync` to start the animation
await animation.PlayAsync(JSRuntime);
// to pause an animation call `PauseAsync`
await animation.PauseAsync(JSRuntime);
// to reverse an animation call `ReverseAsync`
await animation.ReverseAsync(JSRuntime);
// to remove a target from an animation call `RemoveAsync`
await animation.RemoveAsync(JSRuntime, ".any-css-selector .el");
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp2.0 was computed. netcoreapp2.1 was computed. netcoreapp2.2 was computed. netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.0 is compatible. netstandard2.1 was computed. |
.NET Framework | net461 was computed. net462 was computed. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen40 was computed. tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.0
- Microsoft.AspNetCore.Components (>= 3.1.3)
- Microsoft.AspNetCore.Components.Web (>= 3.1.3)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.