feat(components): Popover exit animation

src/LumexUI/Components/Popover/LumexPopover.razor.cs

@@ -2,6 +2,8 @@
 // LumexUI licenses this file to you under the MIT license
 // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
 
+using System.Threading.Tasks;
+
 using LumexUI.Common;
 using LumexUI.Extensions;
 using LumexUI.Styles;
@@ -99,8 +101,10 @@ public partial class LumexPopover : LumexComponentBase, ISlotComponent<PopoverSl
 	/// </summary>
 	[Parameter] public PopoverSlots? Classes { get; set; }
 
+	internal bool IsVisible { get; private set; }
 	internal bool IsTooltip { get; private set; }
 	internal PopoverOptions Options { get; private set; }
+	internal PopoverState State { get; private set; } = PopoverState.Closed;
 	internal Dictionary<string, ComponentSlot> Slots { get; private set; } = [];
 
 	private readonly PopoverContext _context;
@@ -126,6 +130,11 @@ protected override void OnParametersSet()
 			IsTooltip = value is "tooltip";
 		}
 
+		if (Open && State is PopoverState.Closing or PopoverState.Closed )
+		{
+			State = PopoverState.Opening;
+		}
+
 		Options = new PopoverOptions( this );
 
 		var popover = Popover.Style( TwMerge );
@@ -135,6 +144,7 @@ protected override void OnParametersSet()
 			[nameof( Color )] = Color.ToString(),
 			[nameof( Radius )] = Radius.ToString(),
 			[nameof( Shadow )] = Shadow.ToString(),
+			[nameof( State )] = State.ToString(),
 		} );
 	}
 
@@ -151,21 +161,40 @@ internal async Task TriggerAsync()
 			await CloseAsync();
 		}
 
-		StateHasChanged();
+		await InvokeAsync( StateHasChanged );
 	}
 
-	internal Task OpenAsync()
+	internal async Task OpenAsync()
 	{
+		State = PopoverState.Opening;
+		await InvokeAsync( StateHasChanged );
+
+		await Task.Delay( 100 ); // <-- I don't know how to avoid this. The animation works from the second time forward
+
 		Open = true;
-		return OpenChanged.InvokeAsync( true );
+		await OpenChanged.InvokeAsync( true );
 	}
 
 	internal Task CloseAsync()
 	{
+		State = PopoverState.Closing;
+
 		Open = false;
 		return OpenChanged.InvokeAsync( false );
 	}
 
+	internal void SetTransitionState()
+	{
+		if( State is PopoverState.Opening )
+		{
+			State = PopoverState.Opened;
+		}
+		else if( State is PopoverState.Closing )
+		{
+			State = PopoverState.Closed;
+		}
+	}
+
 	/// <summary>
 	/// Represents the configuration options for a <see cref="LumexPopover"/> component.
 	/// </summary>
@@ -177,4 +206,9 @@ internal readonly struct PopoverOptions( LumexPopover popover )
 		public bool MatchRefWidth { get; } = popover.MatchRefWidth;
 		public string Placement { get; } = popover.Placement.ToDescription();
 	}
+
+	internal enum PopoverState
+	{
+		Closed, Opening, Opened, Closing
+	}
 }

src/LumexUI/Components/Popover/LumexPopoverContent.razor

@@ -1,17 +1,22 @@
 @namespace LumexUI
 @inherits LumexComponentBase
 
-@if( Popover.Open )
+@using PopoverState = LumexPopover.PopoverState;
+
+@if( Popover.State is not PopoverState.Closed )
 {
-    <PopoverWrapper Class="@Popover.Slots["Wrapper"]()">
+    <PopoverWrapper Class="@Popover.Slots["Wrapper"]()"
+                    data-popover-open="@Popover.Open.ToAttributeValue()"
+                    data-popover-wrapper
+                    @ontransitionend="HandleTransitionEnd">
         <div role="dialog"
              class="@Popover.Slots["Base"]( Popover.Classes?.Base, Popover.Class )"
              tabindex="-1"
              data-slot="base"
              data-open="@Popover.Open.ToAttributeValue()"
              @attributes="@Popover.AdditionalAttributes">
             <LumexComponent As="@As"
-                            Class="@Popover.Slots["Content"](Popover.Classes?.Content, Class)"
+                            Class="@Popover.Slots["Content"]( Popover.Classes?.Content, Class )"
                             Style="@RootStyle"
                             data-slot="content"
                             @attributes="@AdditionalAttributes">

src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs

@@ -19,6 +19,8 @@
 	/// </summary>
 	[Parameter] public RenderFragment? ChildContent { get; set; }
 
+	[Parameter] public EventCallback OnTransitionEnd { get; set; }
+
 	[CascadingParameter] internal PopoverContext Context { get; set; } = default!;
 
 	private LumexPopover Popover => Context.Owner;
@@ -28,4 +30,12 @@
 	{
 		ContextNullException.ThrowIfNull( Context, nameof( LumexPopoverContent ) );
 	}
-}
+
+	private async Task HandleTransitionEnd( EventArgs e )
+	{
+		Console.WriteLine("Transition end: {0}", Popover.State);
+
+		Popover.SetTransitionState();
+		await OnTransitionEnd.InvokeAsync();
+	}
+}

src/LumexUI/Infrastructure/EventHandlers.cs

@@ -10,6 +10,7 @@ namespace LumexUI.Infrastructure;
 /// Configures event handlers for the components.
 /// </summary>
 [EventHandler( "onclickoutside", typeof( EventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
+[EventHandler( "ontransitionend", typeof( EventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
 public static class EventHandlers
 {
-}
+}

src/LumexUI/Styles/Popover.cs

@@ -31,7 +31,8 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.ToString(),
 
 				["Wrapper"] = new ElementClass()
-					.Add( "animate-enter" )
+					.Add( "transition-[opacity,scale] duration-300 ease opacity-0 scale-85" )
+					.Add( "data-[popover-open=true]:opacity-100 data-[popover-open=true]:scale-100" )
 					.ToString(),
 
 				[nameof( PopoverSlots.Content )] = new ElementClass()

src/LumexUI/wwwroot/js/LumexUI.js

@@ -8,4 +8,15 @@ export const Lumex = {
     elementReference
 };
 
-window['Lumex'] = Lumex
+window['Lumex'] = Lumex
+
+Blazor.registerCustomEventType('animationend', {
+    browserEventName: 'animationend',
+    createEventArgs: event => {
+        return {
+            AnimationName: event.animationName,
+            ElapsedTime: event.elapsedTime,
+            PseudoElement: event.pseudoElement
+        };
+    }
+})

tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor

@@ -1,4 +1,5 @@
 @namespace LumexUI.Tests.Components
+@using LumexUI.Infrastructure
 @inherits TestContext
 
 @code {
@@ -99,7 +100,7 @@
                     </LumexDropdownMenu>
                 </LumexDropdown>
             </text>
-        );
+    );
 
         var trigger = cut.Find( "[data-popovertarget]" );
         trigger.Click();
@@ -133,7 +134,13 @@
         var menuItems = cut.FindAll( "li" );
         menuItems[0].Click();
 
-        var menu = cut.FindByTestId( "menu-test" );
+        var popover = cut.Find("[data-popover-wrapper]");
+        popover.TriggerEvent("onanimationend", new AnimationEventArgs
+        {
+            AnimationName = "animate-exit"
+        });
+
+        var menu = cut.FindByTestId("menu-test");
         menu.Should().BeNull();
     }