{"id":13807593,"url":"https://github.com/aboudoux/BlazorAnimation","last_synced_at":"2025-05-14T00:31:46.762Z","repository":{"id":39566297,"uuid":"245676975","full_name":"aboudoux/BlazorAnimation","owner":"aboudoux","description":"a Blazor component based on animate.css to easly animate your content","archived":false,"fork":false,"pushed_at":"2023-09-14T13:56:07.000Z","size":6473,"stargazers_count":136,"open_issues_count":4,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-24T06:38:28.875Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aboudoux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-03-07T17:35:05.000Z","updated_at":"2025-02-27T15:24:38.000Z","dependencies_parsed_at":"2024-01-07T10:28:40.627Z","dependency_job_id":"51d5f69f-acc7-4bad-a6a3-32d72680e07a","html_url":"https://github.com/aboudoux/BlazorAnimation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboudoux%2FBlazorAnimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboudoux%2FBlazorAnimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboudoux%2FBlazorAnimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboudoux%2FBlazorAnimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aboudoux","download_url":"https://codeload.github.com/aboudoux/BlazorAnimation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046351,"owners_count":22005575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:27.327Z","updated_at":"2025-05-14T00:31:41.741Z","avatar_url":"https://github.com/aboudoux.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["2D/3D Rendering engines"],"readme":"# BlazorAnimation\n\na Blazor component based on animate.css to easly animate your content\n\n![BlazorAnimation animation](BlazorAnimation2.gif)\n\n## Quick Start\n\nTo animate a component, wrap it inside Animation component and use the Effect parameter to define the animation:\n\n```\n     \u003cAnimation Effect=\"@Effect.BounceOutUp\" Speed=\"@Speed.Fast\"\u003e\n        \u003ch1\u003eHello, world!\u003c/h1\u003e\n    \u003c/Animation\u003e\n```\n\n## Getting Started\n\nFew steps are required in order to use the library.\n\n#### Add NuGet\n\n```csharp\nInstall-Package BlazorAnimation\n```\n\n#### Configure _Imports.razor\n\n```\n...\n@using BlazorAnimation\n```\n\n#### Add JS interop into _Host.cshtml\n\n```\n   \u003cscript src=\"_content/BlazorAnimation/blazorAnimationInterop.js\"\u003e\u003c/script\u003e\n```\n\n#### If you notice any error in blazor wasm, add a configuration in program.cs\n```\n...\nbuilder.Services.Configure\u003cAnimationOptions\u003e(Guid.NewGuid().ToString(),c=\u003e{});\n```\n\n#### Use the Animation component\n\n```\n    \u003cAnimation Effect=\"@Effect.BounceOutUp\" Speed=\"@Speed.Fast\" Delay=\"@Delay.None\" IterationCount=\"2\"\u003e\n        \u003ch1\u003eHello, world!\u003c/h1\u003e\n    \u003c/Animation\u003e\n```\n\n## Sample\n\nFor a sample, please view http://blazoranimation.boudoux.fr\n\n## Parameters\n\nHere's are the parameters to configure the component\n\n|Parameter Name| Abstract  | Default |\n|--|--|--|\n| [Effect](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#effect) | Define the effect to use for animate the component. | @Effect.Bounce  |\n| [Delay](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#delay) | The time to wait before the animation begin. | @Delay.None\n| [Speed](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#speed) | The total animation duration. | @Speed.Slow\n| [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\n| [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\n| [OnAnimationEnd](https://github.com/aboudoux/BlazorAnimation/blob/master/README.md#onanimationend) | Call a method when the animation end. | null\n| Class | Append some css classes to the component | string.Empty\n| Style | Append some css styles to the component | string.Empty\n\n### Effect\nDefine the effect to use for animate the component.\n\nYou 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.\n\nExample\n```\n\u003cAnimation Effect=\"@Effect.Jello\"\u003e\n\t\u003ch1\u003eHello !\u003c/h1\u003e\n\u003c/Animation\u003e\n```   \n### Delay\nThe time to wait before the animation begin.\n\nYou can use one of the 6 predefined delay by using the `@Delay` enumeration that contains :\n\n- None\n- OneSecond\n- TwoSeconds\n- ThreeSeconds\n- FourSeconds\n- FiveSeconds\n\nExample :\n```\n\u003cAnimation Effect=\"@Effect.Jello\" Delay=\"@Delay.OneSecond\"\u003e\n\t\u003ch1\u003eHello !\u003c/h1\u003e\n\u003c/Animation\u003e\n```   \n\nOr just define your own time manualy with a `TimeSpan` like below :\n\nExample with custom time :\n```\n\u003cAnimation Effect=\"@Effect.Jello\" Delay=\"@TimeSpan.FromMilliseconds(250)\"\u003e\n\t\u003ch1\u003eHello !\u003c/h1\u003e\n\u003c/Animation\u003e\n```   \n\n### Speed\n\nthe total time of the animation from the time when the delay has elapsed.\n\nYou can use one of the 4 predefined speed by using the  `@Speed`  enumeration that contains :\n\n-   Slow (2s)\n-   Slower (3s)\n-   Fast (800ms)\n-   Faster (500ms)\n\n```\n\u003cAnimation Effect=\"@Effect.Jello\" Speed=\"@Speed.Fast\"\u003e\n\t\u003ch1\u003eHello !\u003c/h1\u003e\n\u003c/Animation\u003e\n```  \nOr just define your own time manualy with a `TimeSpan` like below :\n\nExample with custom time :\n```\n\u003cAnimation Effect=\"@Effect.Jello\" Speed=\"@TimeSpan.FromSeconds(1)\"\u003e\n\t\u003ch1\u003eHello !\u003c/h1\u003e\n\u003c/Animation\u003e\n```\n### IterationCount\nthe number of times the animation will be played. For an infinite loop, you can set a negative number.\n\nExample :\n```\n\u003cAnimation Effect=\"@Effect.Jello\" IterationCount=\"5\"\u003e\n\t\u003ch1\u003eHello !\u003c/h1\u003e\n\u003c/Animation\u003e\n```\nExemple with infinite loop :\n```\n\u003cAnimation Effect=\"@Effect.Jello\" IterationCount=\"-1\"\u003e\n\t\u003ch1\u003eHello !\u003c/h1\u003e\n\u003c/Animation\u003e\n```\n\n\u003e Notice that an IterationCount defined to 0 do not play the animation.\n\n### Enabled\nProvide 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.\n\nExample\n```\n\u003cAnimation Effect=\"@Effect.BounceOutUp\" Enabled=\"RunAnimation\"\u003e\n\t\u003ch1 @onmouseover=\"MouseOver\" @onmouseout=\"MouseOut\"\u003eHello, world!\u003c/h1\u003e\n\u003c/Animation\u003e\n\n@code{\n\n    private bool RunAnimation = false;\n    private void MouseOver() =\u003e RunAnimation = true;\n    private void MouseOut() =\u003e RunAnimation = false;\n}\n```\n\n### OnAnimationEnd\nCall a method when the animation end.\n\nExample\n```\n \u003cAnimation Effect=\"@Effect.BounceOutUp\" Enabled=\"RunAnimation\" Speed=\"@Speed.Slower\" OnAnimationEnd=\"AnimationEnd\"\u003e\n     \u003ch1 @onmouseover=\"MouseOver\" \u003eHello, world!\u003c/h1\u003e\n \u003c/Animation\u003e\n\n@code{\n\n    private bool RunAnimation = false;\n    private void MouseOver() =\u003e RunAnimation = true;\n    private void AnimationEnd() =\u003e RunAnimation = false;\n}\n```\nThis property can be accessed with ```CascadingValue```\n\nFor example, imagine you create an ```InputPassword``` component like this :\n```\n    \u003cAnimation Effect=\"@Effect.Shake\" Speed=\"@Speed.Fast\" Enabled=\"@Shake\"\u003e\n        \u003cinput type=\"password\" class=\"form-control\" @bind-value=\"@Password\" placeholder=\"Enter your password\" /\u003e\n    \u003c/Animation\u003e\n\n@code {\n\n    [Parameter]\n    public bool Shake { get; set; }\n    public string Password { get; set; }\n}\n```\nand you use it in a page :\n\n```\n\u003cInputPassword @ref=\"inputPassword\" Shake=\"NotifyBadPassword\" /\u003e\n\u003cbutton @onclick=\"OkClicked\"\u003eOK\u003c/button\u003e\n\n@code {\n    InputPassword inputPassword;\n    bool NotifyBadPassword = false;\n    private void OkClicked()\n    {\n        if (inputPassword.Password != \"test\")\n            NotifyBadPassword = true;\n    }\n}\n```\nThe 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.\n\n![InputPassword animation](inputpassword1.gif)\n\nThe 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 :\n\n```\n\u003cCascadingValue Name=\"OnAnimationEnd\" Value=\"@EventCallback.Factory.Create(this,AnimationEnd)\"\u003e\n  \u003cInputPassword @ref=\"inputPassword\" Shake=\"@NotifyBadPassword\" /\u003e\n\u003c/CascadingValue\u003e\n\u003cbutton @onclick=\"OkClicked\"\u003eOK\u003c/button\u003e\n\n@code {\n\tInputPassword inputPassword;\n\tbool NotifyBadPassword = false;\n\n\tprivate void OkClicked()\n\t{\n\t    if (inputPassword.Password != \"test\")\n\t        NotifyBadPassword = true;\n\t}\n\n\tprivate void AnimationEnd()\n\t{\n\t    NotifyBadPassword = false;\t    \n\t}\n}\n```\n![InputPassword2 animation](inputpassword2.gif)\n\n## Named configurations\n\nBlazorAnimation 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:\n\n```\nservices.Configure\u003cAnimationOptions\u003e(\"bounce\", o =\u003e\n{\n\to.Effect = Effect.BounceInLeft;\n\to.Speed = Speed.Faster;\n\to.Delay = TimeSpan.FromMilliseconds(200);\n\to.IterationCount = 2;\n});\n\nservices.Configure\u003cAnimationOptions\u003e(o =\u003e {\n\to.Effect = Effect.FadeOutDown;\n\to.Speed = Speed.Slow;\n});\n```\n\nTo use a named configuration, provide the OptionsName parameter:\n\n```\n\u003cAnimation OptionsName=\"bounce\"\u003e\n    \u003ch1\u003eHello, world!\u003c/h1\u003e\n\u003c/Animation\u003e\n```\n## Authors\n\nBlazorAnimation is created by [Aurelien BOUDOUX](http://aurelien.boudoux.fr).\n\nContributions are welcome!\n\n## License\n\nBlazorAnimation is MIT licensed. The library uses the following other libraries:\n\n* [Animate.css](https://github.com/daneden/animate.css): MIT-license\n\n## ChangeLog\n\n2 january 2023 - v 2.2\n- `OnAnimationEnd` is triggered for element only\n\n2 december 2021 - v 2.1 \n- Add `Class` and `Style` Attributes\n- `Effect` can be compared by using equal sign (==)\n\n7 may 2020 - v 2.0\n- Upgrade to animate.css v4","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faboudoux%2FBlazorAnimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faboudoux%2FBlazorAnimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faboudoux%2FBlazorAnimation/lists"}