From d41ae3a3371e6b36ea7263d05acebd4659b963e5 Mon Sep 17 00:00:00 2001
From: Denny09310 <k.denny2000@gmail.com>
Date: Wed, 17 Sep 2025 21:17:20 +0200
Subject: [PATCH 1/7] feat: added event to handle 'onanimationend'

---
 src/LumexUI/Infrastructure/EventHandlers.cs | 20 ++++++++++++++++++++
 src/LumexUI/wwwroot/js/LumexUI.js           | 13 ++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/LumexUI/Infrastructure/EventHandlers.cs b/src/LumexUI/Infrastructure/EventHandlers.cs
index 07c52d99..94f825fb 100644
--- a/src/LumexUI/Infrastructure/EventHandlers.cs
+++ b/src/LumexUI/Infrastructure/EventHandlers.cs
@@ -10,6 +10,26 @@ namespace LumexUI.Infrastructure;
 /// Configures event handlers for the components.
 /// </summary>
 [EventHandler( "onclickoutside", typeof( EventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
+[EventHandler( "onanimationend", typeof( AnimationEventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
 public static class EventHandlers
 {
 }
+
+/// <summary>
+/// Arguments for the animation events.
+/// </summary>
+public class AnimationEventArgs : EventArgs
+{
+	/// <summary>
+	/// Gets the name of the animation.
+	/// </summary>
+	public string AnimationName { get; set; } = string.Empty;
+	/// <summary>
+	/// Gets the elapsed time of the animation in seconds.
+	/// </summary>
+	public double ElapsedTime { get; set; }
+	/// <summary>
+	/// Gets the name of the pseudo-element the animation is applied to.
+	/// </summary>
+	public string PseudoElement { get; set; } = string.Empty;
+}
\ No newline at end of file
diff --git a/src/LumexUI/wwwroot/js/LumexUI.js b/src/LumexUI/wwwroot/js/LumexUI.js
index ee219f8f..7ffe7ed1 100644
--- a/src/LumexUI/wwwroot/js/LumexUI.js
+++ b/src/LumexUI/wwwroot/js/LumexUI.js
@@ -8,4 +8,15 @@ export const Lumex = {
     elementReference
 };
 
-window['Lumex'] = Lumex
\ No newline at end of file
+window['Lumex'] = Lumex
+
+Blazor.registerCustomEventType('animationend', {
+    browserEventName: 'animationend',
+    createEventArgs: event => {
+        return {
+            AnimationName: event.animationName,
+            ElapsedTime: event.elapsedTime,
+            PseudoElement: event.pseudoElement
+        };
+    }
+})
\ No newline at end of file

From 93f4a14c5363e1ece383de8fcb358ee852b97944 Mon Sep 17 00:00:00 2001
From: Denny09310 <k.denny2000@gmail.com>
Date: Wed, 17 Sep 2025 21:17:28 +0200
Subject: [PATCH 2/7] feat: added exiting animation css

---
 src/LumexUI/Styles/_theme.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/LumexUI/Styles/_theme.css b/src/LumexUI/Styles/_theme.css
index 45ed19c8..885e4410 100644
--- a/src/LumexUI/Styles/_theme.css
+++ b/src/LumexUI/Styles/_theme.css
@@ -172,6 +172,7 @@
 
     /* 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;
@@ -189,6 +190,18 @@
         }
     }
 
+    @keyframes exit {
+        0% {
+            opacity: 1;
+            transform: translateZ(0) scale(1);
+        }
+
+        100% {
+            opacity: 0;
+            transform: translateZ(0)  scale(0.85);
+        }
+    }
+
     @keyframes shimmer {
         100% {
             translate: 100%;

From 90288b05289116f5831cfd9a0e3c48e6be574997 Mon Sep 17 00:00:00 2001
From: Denny09310 <k.denny2000@gmail.com>
Date: Wed, 17 Sep 2025 21:17:44 +0200
Subject: [PATCH 3/7] feat: adding state to keep the animation running before
 closing

---
 src/LumexUI/Components/Popover/LumexPopover.razor.cs   |  7 +++++++
 .../Components/Popover/LumexPopoverContent.razor       |  8 +++++---
 .../Components/Popover/LumexPopoverContent.razor.cs    | 10 ++++++++++
 src/LumexUI/Styles/Popover.cs                          |  3 ++-
 .../Components/Dropdown/DropdownTests.razor            |  2 +-
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/LumexUI/Components/Popover/LumexPopover.razor.cs b/src/LumexUI/Components/Popover/LumexPopover.razor.cs
index fdca7a5c..95974aa0 100644
--- a/src/LumexUI/Components/Popover/LumexPopover.razor.cs
+++ b/src/LumexUI/Components/Popover/LumexPopover.razor.cs
@@ -99,6 +99,7 @@ public partial class LumexPopover : LumexComponentBase, ISlotComponent<PopoverSl
 	/// </summary>
 	[Parameter] public PopoverSlots? Classes { get; set; }
 
+	internal bool IsVisible { get; set; }
 	internal bool IsTooltip { get; private set; }
 	internal PopoverOptions Options { get; private set; }
 	internal Dictionary<string, ComponentSlot> Slots { get; private set; } = [];
@@ -126,6 +127,11 @@ protected override void OnParametersSet()
 			IsTooltip = value is "tooltip";
 		}
 
+		if( Open && !IsVisible )
+		{
+			IsVisible = true;
+		}
+
 		Options = new PopoverOptions( this );
 
 		var popover = Popover.Style( TwMerge );
@@ -157,6 +163,7 @@ internal async Task TriggerAsync()
 	internal Task OpenAsync()
 	{
 		Open = true;
+		IsVisible = true;
 		return OpenChanged.InvokeAsync( true );
 	}
 
diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor b/src/LumexUI/Components/Popover/LumexPopoverContent.razor
index 6d42d0d3..8206670b 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor
+++ b/src/LumexUI/Components/Popover/LumexPopoverContent.razor
@@ -1,9 +1,11 @@
 @namespace LumexUI
 @inherits LumexComponentBase
 
-@if( Popover.Open )
+@if( Popover.IsVisible )
 {
-    <PopoverWrapper Class="@Popover.Slots["Wrapper"]()">
+    <PopoverWrapper Class="@Popover.Slots["Wrapper"]()"
+                    data-popover-open="@Popover.Open.ToAttributeValue()"
+                    @onanimationend="HandleAnimationEnd">
         <div role="dialog"
              class="@Popover.Slots["Base"]( Popover.Classes?.Base, Popover.Class )"
              tabindex="-1"
@@ -11,7 +13,7 @@
              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">
diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs b/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
index c39807fb..35580bad 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
+++ b/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
@@ -3,6 +3,7 @@
 // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
 
 using LumexUI.Common;
+using LumexUI.Infrastructure;
 
 using Microsoft.AspNetCore.Components;
 
@@ -28,4 +29,13 @@ protected override void OnInitialized()
 	{
 		ContextNullException.ThrowIfNull( Context, nameof( LumexPopoverContent ) );
 	}
+
+	private async Task HandleAnimationEnd( AnimationEventArgs e )
+	{
+		if( !Popover.Open && e.AnimationName.Contains( "exit", StringComparison.OrdinalIgnoreCase ) )
+		{
+			Popover.IsVisible = false;
+			await InvokeAsync( StateHasChanged );
+		}
+	}
 }
diff --git a/src/LumexUI/Styles/Popover.cs b/src/LumexUI/Styles/Popover.cs
index 77b3384d..298bc585 100644
--- a/src/LumexUI/Styles/Popover.cs
+++ b/src/LumexUI/Styles/Popover.cs
@@ -31,7 +31,8 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.ToString(),
 
 				["Wrapper"] = new ElementClass()
-					.Add( "animate-enter" )
+					.Add( "data-[popover-open=true]:animate-enter" )
+					.Add( "data-[popover-open=false]:animate-exit" )
 					.ToString(),
 
 				[nameof( PopoverSlots.Content )] = new ElementClass()
diff --git a/tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor b/tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor
index 2dc359cd..79306145 100644
--- a/tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor
+++ b/tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor
@@ -133,7 +133,7 @@
         var menuItems = cut.FindAll( "li" );
         menuItems[0].Click();
 
-        var menu = cut.FindByTestId( "menu-test" );
+        var menu = cut.FindByTestId("menu-test");
         menu.Should().BeNull();
     }
 

From 63ff43479740f923bc3c5367dff8840e49fbd734 Mon Sep 17 00:00:00 2001
From: Denny09310 <k.denny2000@gmail.com>
Date: Thu, 18 Sep 2025 08:58:32 +0200
Subject: [PATCH 4/7] fix: fixed test not triggering '@onanimationend' event

---
 src/LumexUI/Components/Popover/LumexPopover.razor.cs     | 6 +++---
 src/LumexUI/Components/Popover/LumexPopoverContent.razor | 1 +
 .../Components/Dropdown/DropdownTests.razor              | 9 ++++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/LumexUI/Components/Popover/LumexPopover.razor.cs b/src/LumexUI/Components/Popover/LumexPopover.razor.cs
index 95974aa0..365ffa8c 100644
--- a/src/LumexUI/Components/Popover/LumexPopover.razor.cs
+++ b/src/LumexUI/Components/Popover/LumexPopover.razor.cs
@@ -4,7 +4,6 @@
 
 using LumexUI.Common;
 using LumexUI.Extensions;
-using LumexUI.Styles;
 using LumexUI.Utilities;
 
 using Microsoft.AspNetCore.Components;
@@ -134,7 +133,7 @@ protected override void OnParametersSet()
 
 		Options = new PopoverOptions( this );
 
-		var popover = Popover.Style( TwMerge );
+		var popover = Styles.Popover.Style( TwMerge );
 		Slots = popover( new()
 		{
 			[nameof( Size )] = Size.ToString(),
@@ -162,8 +161,9 @@ internal async Task TriggerAsync()
 
 	internal Task OpenAsync()
 	{
-		Open = true;
 		IsVisible = true;
+
+		Open = true;
 		return OpenChanged.InvokeAsync( true );
 	}
 
diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor b/src/LumexUI/Components/Popover/LumexPopoverContent.razor
index 8206670b..5d78a873 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor
+++ b/src/LumexUI/Components/Popover/LumexPopoverContent.razor
@@ -5,6 +5,7 @@
 {
     <PopoverWrapper Class="@Popover.Slots["Wrapper"]()"
                     data-popover-open="@Popover.Open.ToAttributeValue()"
+                    data-popover-wrapper
                     @onanimationend="HandleAnimationEnd">
         <div role="dialog"
              class="@Popover.Slots["Base"]( Popover.Classes?.Base, Popover.Class )"
diff --git a/tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor b/tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor
index 79306145..0979b3e2 100644
--- a/tests/LumexUI.Tests/Components/Dropdown/DropdownTests.razor
+++ b/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,6 +134,12 @@
         var menuItems = cut.FindAll( "li" );
         menuItems[0].Click();
 
+        var popover = cut.Find("[data-popover-wrapper]");
+        popover.TriggerEvent("onanimationend", new AnimationEventArgs
+        {
+            AnimationName = "animate-exit"
+        });
+
         var menu = cut.FindByTestId("menu-test");
         menu.Should().BeNull();
     }

From f6648ed5d139a77c64eed359c4d0a06cdfbca637 Mon Sep 17 00:00:00 2001
From: Denny09310 <k.denny2000@gmail.com>
Date: Thu, 16 Oct 2025 14:21:37 +0200
Subject: [PATCH 5/7] chore: using state machine to control open/close of
 popover

---
 .../Components/Popover/LumexPopover.razor.cs  | 26 ++++++++++++++++++-
 .../Popover/LumexPopoverContent.razor         |  4 ++-
 .../Popover/LumexPopoverContent.razor.cs      | 11 ++++----
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/LumexUI/Components/Popover/LumexPopover.razor.cs b/src/LumexUI/Components/Popover/LumexPopover.razor.cs
index 365ffa8c..cefe5743 100644
--- a/src/LumexUI/Components/Popover/LumexPopover.razor.cs
+++ b/src/LumexUI/Components/Popover/LumexPopover.razor.cs
@@ -4,10 +4,13 @@
 
 using LumexUI.Common;
 using LumexUI.Extensions;
+using LumexUI.Styles;
 using LumexUI.Utilities;
 
 using Microsoft.AspNetCore.Components;
 
+using static LumexUI.LumexPopoverContent;
+
 namespace LumexUI;
 
 /// <summary>
@@ -101,6 +104,7 @@ public partial class LumexPopover : LumexComponentBase, ISlotComponent<PopoverSl
 	internal bool IsVisible { get; set; }
 	internal bool IsTooltip { get; private set; }
 	internal PopoverOptions Options { get; private set; }
+	internal PopoverState State { get; private set; }
 	internal Dictionary<string, ComponentSlot> Slots { get; private set; } = [];
 
 	private readonly PopoverContext _context;
@@ -161,7 +165,7 @@ internal async Task TriggerAsync()
 
 	internal Task OpenAsync()
 	{
-		IsVisible = true;
+		State = PopoverState.Opening;
 
 		Open = true;
 		return OpenChanged.InvokeAsync( true );
@@ -169,10 +173,25 @@ internal Task OpenAsync()
 
 	internal Task CloseAsync()
 	{
+		State = PopoverState.Dismissing;
+	
 		Open = false;
 		return OpenChanged.InvokeAsync( false );
 	}
 
+	internal void SetAnimationState()
+	{
+		if( State is PopoverState.Opening )
+		{
+			State = PopoverState.Opened;
+		}
+
+		if( State is PopoverState.Dismissing )
+		{
+			State = PopoverState.Dismissed;
+		}
+	}
+
 	/// <summary>
 	/// Represents the configuration options for a <see cref="LumexPopover"/> component.
 	/// </summary>
@@ -184,4 +203,9 @@ internal readonly struct PopoverOptions( LumexPopover popover )
 		public bool MatchRefWidth { get; } = popover.MatchRefWidth;
 		public string Placement { get; } = popover.Placement.ToDescription();
 	}
+
+	internal enum PopoverState
+	{
+		Dismissed, Opening, Opened, Dismissing
+	}
 }
diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor b/src/LumexUI/Components/Popover/LumexPopoverContent.razor
index 5d78a873..31391efb 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor
+++ b/src/LumexUI/Components/Popover/LumexPopoverContent.razor
@@ -1,7 +1,9 @@
 @namespace LumexUI
 @inherits LumexComponentBase
 
-@if( Popover.IsVisible )
+@using PopoverState = LumexPopover.PopoverState;
+
+@if( Popover.State is not PopoverState.Dismissed )
 {
     <PopoverWrapper Class="@Popover.Slots["Wrapper"]()"
                     data-popover-open="@Popover.Open.ToAttributeValue()"
diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs b/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
index 35580bad..a3130305 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
+++ b/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
@@ -20,6 +20,8 @@ public partial class LumexPopoverContent : LumexComponentBase
 	/// </summary>
 	[Parameter] public RenderFragment? ChildContent { get; set; }
 
+	[Parameter] public EventCallback<AnimationEventArgs> OnAnimationEnd { get; set; }
+
 	[CascadingParameter] internal PopoverContext Context { get; set; } = default!;
 
 	private LumexPopover Popover => Context.Owner;
@@ -32,10 +34,7 @@ protected override void OnInitialized()
 
 	private async Task HandleAnimationEnd( AnimationEventArgs e )
 	{
-		if( !Popover.Open && e.AnimationName.Contains( "exit", StringComparison.OrdinalIgnoreCase ) )
-		{
-			Popover.IsVisible = false;
-			await InvokeAsync( StateHasChanged );
-		}
+		Popover.SetAnimationState();
+		await OnAnimationEnd.InvokeAsync( e );
 	}
-}
+}
\ No newline at end of file

From 2f7385e87c39ea305662cbdd5fc010dd42411ff8 Mon Sep 17 00:00:00 2001
From: Denny09310 <k.denny2000@gmail.com>
Date: Thu, 16 Oct 2025 14:23:47 +0200
Subject: [PATCH 6/7] chore: removed AnimationEventArgs

---
 .../Popover/LumexPopoverContent.razor.cs      |  6 +++---
 src/LumexUI/Infrastructure/EventHandlers.cs   | 21 +------------------
 2 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs b/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
index a3130305..ee300155 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
+++ b/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
@@ -20,7 +20,7 @@ public partial class LumexPopoverContent : LumexComponentBase
 	/// </summary>
 	[Parameter] public RenderFragment? ChildContent { get; set; }
 
-	[Parameter] public EventCallback<AnimationEventArgs> OnAnimationEnd { get; set; }
+	[Parameter] public EventCallback OnAnimationEnd { get; set; }
 
 	[CascadingParameter] internal PopoverContext Context { get; set; } = default!;
 
@@ -32,9 +32,9 @@ protected override void OnInitialized()
 		ContextNullException.ThrowIfNull( Context, nameof( LumexPopoverContent ) );
 	}
 
-	private async Task HandleAnimationEnd( AnimationEventArgs e )
+	private async Task HandleAnimationEnd( EventArgs e )
 	{
 		Popover.SetAnimationState();
-		await OnAnimationEnd.InvokeAsync( e );
+		await OnAnimationEnd.InvokeAsync();
 	}
 }
\ No newline at end of file
diff --git a/src/LumexUI/Infrastructure/EventHandlers.cs b/src/LumexUI/Infrastructure/EventHandlers.cs
index 94f825fb..9e1a17f8 100644
--- a/src/LumexUI/Infrastructure/EventHandlers.cs
+++ b/src/LumexUI/Infrastructure/EventHandlers.cs
@@ -10,26 +10,7 @@ namespace LumexUI.Infrastructure;
 /// Configures event handlers for the components.
 /// </summary>
 [EventHandler( "onclickoutside", typeof( EventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
-[EventHandler( "onanimationend", typeof( AnimationEventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
+[EventHandler( "onanimationend", typeof( EventArgs ), enableStopPropagation: true, enablePreventDefault: true )]
 public static class EventHandlers
 {
-}
-
-/// <summary>
-/// Arguments for the animation events.
-/// </summary>
-public class AnimationEventArgs : EventArgs
-{
-	/// <summary>
-	/// Gets the name of the animation.
-	/// </summary>
-	public string AnimationName { get; set; } = string.Empty;
-	/// <summary>
-	/// Gets the elapsed time of the animation in seconds.
-	/// </summary>
-	public double ElapsedTime { get; set; }
-	/// <summary>
-	/// Gets the name of the pseudo-element the animation is applied to.
-	/// </summary>
-	public string PseudoElement { get; set; } = string.Empty;
 }
\ No newline at end of file

From 3918bbf1daf321a76420aff55130cb8f6e595e0e Mon Sep 17 00:00:00 2001
From: Denny09310 <k.denny2000@gmail.com>
Date: Thu, 16 Oct 2025 15:34:23 +0200
Subject: [PATCH 7/7] chore: removed animation for transition

---
 .../Components/Popover/LumexPopover.razor.cs  | 37 ++++++++++---------
 .../Popover/LumexPopoverContent.razor         |  4 +-
 .../Popover/LumexPopoverContent.razor.cs      | 11 +++---
 src/LumexUI/Infrastructure/EventHandlers.cs   |  2 +-
 src/LumexUI/Styles/Popover.cs                 |  4 +-
 src/LumexUI/Styles/_theme.css                 | 13 -------
 6 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/LumexUI/Components/Popover/LumexPopover.razor.cs b/src/LumexUI/Components/Popover/LumexPopover.razor.cs
index cefe5743..b4c2da46 100644
--- a/src/LumexUI/Components/Popover/LumexPopover.razor.cs
+++ b/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;
@@ -9,8 +11,6 @@
 
 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
 	}
 }
diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor b/src/LumexUI/Components/Popover/LumexPopoverContent.razor
index 31391efb..d4f8d648 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor
+++ b/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"
diff --git a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs b/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
index ee300155..762f4d5f 100644
--- a/src/LumexUI/Components/Popover/LumexPopoverContent.razor.cs
+++ b/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 @@ public partial class LumexPopoverContent : LumexComponentBase
 	/// </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 @@ protected override void OnInitialized()
 		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();
 	}
 }
\ No newline at end of file
diff --git a/src/LumexUI/Infrastructure/EventHandlers.cs b/src/LumexUI/Infrastructure/EventHandlers.cs
index 9e1a17f8..afb8d260 100644
--- a/src/LumexUI/Infrastructure/EventHandlers.cs
+++ b/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
 {
 }
\ No newline at end of file
diff --git a/src/LumexUI/Styles/Popover.cs b/src/LumexUI/Styles/Popover.cs
index 298bc585..db4298ff 100644
--- a/src/LumexUI/Styles/Popover.cs
+++ b/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()
diff --git a/src/LumexUI/Styles/_theme.css b/src/LumexUI/Styles/_theme.css
index 885e4410..45ed19c8 100644
--- a/src/LumexUI/Styles/_theme.css
+++ b/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%;