feat(components): Popover exit animation

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

@@ -2,15 +2,15 @@
 // 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;
 using LumexUI.Utilities;
 
 using Microsoft.AspNetCore.Components;
 
-using static LumexUI.LumexPopoverContent;
-
 namespace LumexUI;
 
 /// <summary>
@@ -101,10 +101,10 @@ public partial class LumexPopover : LumexComponentBase, ISlotComponent<PopoverSl
 	/// </summary>
 	[Parameter] public PopoverSlots? Classes { get; set; }
 
-	internal bool IsVisible { 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; }
+	internal PopoverState State { get; private set; } = PopoverState.Closed;
 	internal Dictionary<string, ComponentSlot> Slots { get; private set; } = [];
 
 	private readonly PopoverContext _context;
@@ -130,20 +130,21 @@ protected override void OnParametersSet()
 			IsTooltip = value is "tooltip";
 		}
 
-		if( Open && !IsVisible )
+		if (Open && State is PopoverState.Closing or PopoverState.Closed )
 		{
-			IsVisible = true;
+			State = PopoverState.Opening;
 		}
 
 		Options = new PopoverOptions( this );
 
-		var popover = Styles.Popover.Style( TwMerge );
+		var popover = Popover.Style( TwMerge );
 		Slots = popover( new()
 		{
 			[nameof( Size )] = Size.ToString(),
 			[nameof( Color )] = Color.ToString(),
 			[nameof( Radius )] = Radius.ToString(),
 			[nameof( Shadow )] = Shadow.ToString(),
+			[nameof( State )] = State.ToString(),
 		} );
 	}
 
@@ -160,35 +161,37 @@ 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.Dismissing;
-	
+		State = PopoverState.Closing;
+
 		Open = false;
 		return OpenChanged.InvokeAsync( false );
 	}
 
-	internal void SetAnimationState()
+	internal void SetTransitionState()
 	{
 		if( State is PopoverState.Opening )
 		{
 			State = PopoverState.Opened;
 		}
-
-		if( State is PopoverState.Dismissing )
+		else if( State is PopoverState.Closing )
 		{
-			State = PopoverState.Dismissed;
+			State = PopoverState.Closed;
 		}
 	}
 
@@ -206,6 +209,6 @@ internal readonly struct PopoverOptions( LumexPopover popover )
 
 	internal enum PopoverState
 	{
-		Dismissed, Opening, Opened, Dismissing
+		Closed, Opening, Opened, Closing
 	}
 }

src/LumexUI/Components/Popover/LumexPopoverContent.razor

@@ -3,12 +3,12 @@
 
 @using PopoverState = LumexPopover.PopoverState;
 
-@if( Popover.State is not PopoverState.Dismissed )
+@if( Popover.State is not PopoverState.Closed )
 {
     <PopoverWrapper Class="@Popover.Slots["Wrapper"]()"
                     data-popover-open="@Popover.Open.ToAttributeValue()"
                     data-popover-wrapper
-                    @onanimationend="HandleAnimationEnd">
+                    @ontransitionend="HandleTransitionEnd">
         <div role="dialog"
              class="@Popover.Slots["Base"]( Popover.Classes?.Base, Popover.Class )"
              tabindex="-1"

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

@@ -3,7 +3,6 @@
 // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
 
 using LumexUI.Common;
-using LumexUI.Infrastructure;
 
 using Microsoft.AspNetCore.Components;
 
@@ -20,7 +19,7 @@
 	/// </summary>
 	[Parameter] public RenderFragment? ChildContent { get; set; }
 
-	[Parameter] public EventCallback OnAnimationEnd { get; set; }
+	[Parameter] public EventCallback OnTransitionEnd { get; set; }
 
 	[CascadingParameter] internal PopoverContext Context { get; set; } = default!;
 
@@ -32,9 +31,11 @@
 		ContextNullException.ThrowIfNull( Context, nameof( LumexPopoverContent ) );
 	}
 
-	private async Task HandleAnimationEnd( EventArgs e )
+	private async Task HandleTransitionEnd( EventArgs e )
 	{
-		Popover.SetAnimationState();
-		await OnAnimationEnd.InvokeAsync();
+		Console.WriteLine("Transition end: {0}", Popover.State);
+
+		Popover.SetTransitionState();
+		await OnTransitionEnd.InvokeAsync();
 	}
 }

src/LumexUI/Infrastructure/EventHandlers.cs

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

src/LumexUI/Styles/Popover.cs

@@ -31,8 +31,8 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.ToString(),
 
 				["Wrapper"] = new ElementClass()
-					.Add( "data-[popover-open=true]:animate-enter" )
-					.Add( "data-[popover-open=false]:animate-exit" )
+					.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/Styles/_theme.css

@@ -172,7 +172,6 @@
 
     /* Animations */
     --animate-enter: enter 150ms ease-out normal both;
-    --animate-exit: exit 150ms ease-out normal both;
     --animate-shimmer: shimmer 2s infinite;
     --animate-sway: sway 0.75s infinite;
     --animate-blink: blink 1.5s infinite both;
@@ -190,18 +189,6 @@
         }
     }
 
-    @keyframes exit {
-        0% {
-            opacity: 1;
-            transform: translateZ(0) scale(1);
-        }
-
-        100% {
-            opacity: 0;
-            transform: translateZ(0)  scale(0.85);
-        }
-    }
-
     @keyframes shimmer {
         100% {
             translate: 100%;