src/Connected.Components/Components/TransitionAnimator.razor

@@ -0,0 +1,107 @@
+@using Connected.Utilities;
+
+<div class="@ClassList" @ontransitionend="TransitionEnd" @onanimationend="TransitionEnd">
+   @if (ContentVisible)
+   {
+      @ChildContent
+   }
+</div>
+
+<style>
+   .transition-container-component {
+      transition: all @(TransitionDuration)ms;
+   }
+</style>
+
+@code {
+   private bool _visible = false;
+
+   /// <summary>
+   /// The class to append to the container while content is visible and transitioning in
+   /// </summary>
+   [Parameter, EditorRequired]
+   public string? TransitionInClass { get; set; }
+
+   /// <summary>
+   /// The class to append to the container while content is transitioning out and hidden
+   /// </summary>
+   [Parameter, EditorRequired]
+   public string? TransitionOutClass { get; set; }
+
+   /// <summary>
+   /// The class to append to the container to control transitions
+   /// </summary>
+   [Parameter]
+   public string? TransitionContainerClass { get; set; } = "transition-container-component";
+
+   /// <summary>
+   /// Controls the visibility of the child content
+   /// </summary>
+   [Parameter, EditorRequired]
+   public bool Visible { get => _visible; set => StartTransition(value); }
+
+   /// <summary>
+   /// The content to show/hide
+   /// </summary>
+   [Parameter, EditorRequired]
+   public RenderFragment? ChildContent { get; set; }
+
+   /// <summary>
+   /// Indicates a transition has ended. Useful for visual cleanup.
+   /// </summary>
+   [Parameter]
+   public EventCallback TransitionEnded { get; set; }
+
+   /// <summary>
+   /// The duration of transitions in milliseconds.
+   /// </summary>
+   [Parameter]
+   public int TransitionDuration { get; set; } = 2000;
+
+   private bool TransitioningIn { get; set; }
+   
+   private bool TransitioningOut { get; set; }
+
+   private bool ContentVisible { get; set; }
+
+   private CssBuilder ClassList
+   {
+      get
+      {
+         return new CssBuilder(TransitionContainerClass)
+         .AddClass(TransitionInClass, TransitioningIn)
+         .AddClass(TransitionOutClass, TransitioningOut);
+      }
+   }
+
+   private void StartTransition(bool visible)
+   {
+      if (visible == Visible)
+         return;
+
+      _visible = visible;
+
+      TransitioningIn = visible;
+
+      TransitioningOut = !visible;
+
+      if (visible)
+         ContentVisible = true;
+
+      StateHasChanged();
+   }
+
+   private void TransitionEnd()
+   {
+      ContentVisible = Visible;
+      StateHasChanged();
+
+      TransitionEnded.InvokeAsync();
+   }
+
+   protected override void OnInitialized()
+   {
+      base.OnInitialized();
+      ContentVisible = Visible;
+   }
+}