Added option for running the animation manually.

global.json

@@ -1,5 +1,6 @@
 {
  "sdk": {
- "version": "3.1.100"
+ "version": "3.1.101",
+ "rollForward": "latestFeature"
  }
 }

samples/BlazorAnimate.Sample/Pages/Manual.razor

@@ -0,0 +1,27 @@
+@page "/manual"
+
+<h1>Manual example</h1>
+
+<p>
+ This sample shows how animation can be executed by clicking a button by setting the IsManual of the Animate component to true and then running the animation using Run-method.
+</p>
+
+<div class="mt-3"></div>
+
+<button class="btn btn-primary" @onclick="RunAnimation">Animate</button>
+
+<div class="mt-3"></div>
+
+<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" @ref="myAnim" IsManual="true">
+ <Counter></Counter>
+</Animate>
+
+@code {
+
+ private Animate myAnim;
+
+ private void RunAnimation()
+ {
+ myAnim.Run();
+ }
+}

samples/BlazorAnimate.Sample/Shared/NavMenu.razor

@@ -12,6 +12,11 @@
  <span class="oi oi-home" aria-hidden="true"></span> Home
  </NavLink>
  </li>
+ <li class="nav-item px-3">
+ <NavLink class="nav-link" href="Manual" Match="NavLinkMatch.All">
+ <span class="oi oi-account-login" aria-hidden="true"></span> Manual
+ </NavLink>
+ </li>
  <li class="nav-item px-3">
  <NavLink class="nav-link" href="anchoring">
  <span class="oi oi-plus" aria-hidden="true"></span> Anchor
@@ -34,4 +39,5 @@
  {
  collapseNavMenu = !collapseNavMenu;
  }
-}
+
+}

src/BlazorAnimate/Animate.razor

@@ -1,10 +1,13 @@
 @using System.Globalization
 @using Microsoft.Extensions.Options
 
-<div @attributes="@InputAttributes" data-aos="@_animationName" data-aos-delay="@_delay" data-aos-duration="@_duration" data-aos-easing="@_easingName"
- data-aos-mirror="@_mirror" data-aos-once="@_once" data-aos-offset="@Offset" data-aos-anchor="@Anchor" data-aos-anchor-placement="@AnchorPlacement">
- @ChildContent
-</div>
+@if (_manuallyExecuted || IsManual == false)
+{
+ <div @attributes="@InputAttributes" data-aos="@_animationName" data-aos-delay="@_delay" data-aos-duration="@_duration" data-aos-easing="@_easingName" 
+ data-aos-mirror="@_mirror" data-aos-once="@_once" data-aos-offset="@Offset" data-aos-anchor="@Anchor" data-aos-anchor-placement="@AnchorPlacement">
+ @ChildContent
+ </div>
+}
 
 @code
 {
@@ -14,6 +17,7 @@
  private string _delay = "";
  private string _mirror;
  private string _once;
+ private bool _manuallyExecuted = false;
 
  [Parameter] public RenderFragment ChildContent { get; set; }
  [Parameter] public IAnimation Animation { get; set; }
@@ -29,12 +33,18 @@
  [Parameter] public string AnchorPlacement { get; set; }
  [Parameter] public string OptionsName { get; set; } = Microsoft.Extensions.Options.Options.DefaultName;
  [Parameter] public AnimateOptions Options { get; set; }
+ [Parameter] public bool IsManual { get; set; }
 
  [Parameter(CaptureUnmatchedValues = true)]
  public Dictionary<string, object> InputAttributes { get; set; }
 
  [Inject] private IOptionsSnapshot<AnimateOptions> _optionsAccessor { get; set; }
 
+ public void Run()
+ {
+ _manuallyExecuted = true;
+ }
+
  protected override void OnParametersSet()
  {
  SetDefaults();

src/BlazorAnimate/BlazorAnimate.csproj

@@ -9,14 +9,14 @@
  <Description>Easily Animate Blazor Components using Blazor Animate. Powered by AOS.</Description>
  <PackageDescription>Easily Animate Blazor Components using Blazor Animate. Powered by AOS.</PackageDescription>
  <PackageProjectUrl>https://github.com/mikoskinen/Blazor.Animate</PackageProjectUrl>
- <Copyright>©2019 Mikael Koskinen</Copyright>
+ <Copyright>©2020 Mikael Koskinen</Copyright>
  <PackageId>BlazorAnimate</PackageId>
  <Product>BlazorAnimate</Product>
  <PackageLicenseExpression>MIT</PackageLicenseExpression>
  <RepositoryUrl>https://github.com/mikoskinen/Blazor.Animate</RepositoryUrl>
  <PackageTags>blazor;animation;animate</PackageTags>
  <Title>Blazor Animate</Title>
- <MinVerMinimumMajorMinor>2.0</MinVerMinimumMajorMinor> 
+ <MinVerMinimumMajorMinor>3.0</MinVerMinimumMajorMinor> 
  </PropertyGroup>
 
  <ItemGroup>