anime.Blazor
0.9.4
See the version list below for details.
dotnet add package anime.Blazor --version 0.9.4
NuGet\Install-Package anime.Blazor -Version 0.9.4
<PackageReference Include="anime.Blazor" Version="0.9.4" />
paket add anime.Blazor --version 0.9.4
#r "nuget: anime.Blazor, 0.9.4"
// Install anime.Blazor as a Cake Addin
#addin nuget:?package=anime.Blazor&version=0.9.4
// Install anime.Blazor as a Cake Tool
#tool nuget:?package=anime.Blazor&version=0.9.4
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" };
// specifies the parameters, for more info see the original documintation
// of animejs library
animation.AdditionalParameters = new Dictionary<string, object>
{
{ "translateX", 250 },
{ "loop", true },
{ "delay", 500 },
{ "backgroundColor", "#4266f5"},
};
// 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 atart 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.