From 638c0a07408cc704fc34f75cb232f6c17fe4c40c Mon Sep 17 00:00:00 2001
From: Jorge Osta <jorgeosta04@gmail.com>
Date: Thu, 23 Mar 2023 23:15:14 +0100
Subject: [PATCH 1/5] Add move-in animation usable on CustomLayout

---
 samples/BlazorServer/Pages/Animation.razor    | 22 +++++-
 samples/BlazorServer/Pages/CustomLayout.razor | 13 +++-
 .../Shared/CustomAnimatedBootstrapModal.razor | 29 ++++++++
 .../Shared/CustomBootstrapModal.razor         |  4 +-
 .../BlazorWebAssembly/Pages/Animation.razor   | 16 +++++
 .../Pages/CustomLayout.razor                  | 10 +++
 .../Shared/CustomAnimatedBootstrapModal.razor | 29 ++++++++
 .../Shared/CustomBootstrapModal.razor         |  6 +-
 .../BlazoredModalInstance.razor               | 18 ++---
 .../BlazoredModalInstance.razor.cs            | 43 +++++++++---
 .../BlazoredModalInstance.razor.css           | 69 +++++++++++++------
 .../Configuration/ModalAnimationType.cs       |  5 ++
 12 files changed, 216 insertions(+), 48 deletions(-)
 create mode 100644 samples/BlazorServer/Shared/CustomAnimatedBootstrapModal.razor
 create mode 100644 samples/BlazorWebAssembly/Shared/CustomAnimatedBootstrapModal.razor

diff --git a/samples/BlazorServer/Pages/Animation.razor b/samples/BlazorServer/Pages/Animation.razor
index ae99bdd8..11d551c9 100644
--- a/samples/BlazorServer/Pages/Animation.razor
+++ b/samples/BlazorServer/Pages/Animation.razor
@@ -33,6 +33,8 @@
 </div>
 
 <button @onclick="AnimationDefault" class="btn btn-primary">Fade-in Fade-Out (Default)</button>
+<button @onclick="FadeInAnimation" class="btn btn-primary">Fade-in</button>
+<button @onclick="MoveInOutAnimation" class="btn btn-primary">Move-in Move-Out</button>
 <button @onclick="NoAnimation" class="btn btn-secondary">None</button>
 
 <p>
@@ -49,6 +51,20 @@
         Modal.Show<Confirm>("Default Animation");
     }
 
+    void FadeInAnimation()
+    {
+        var options = new ModalOptions { AnimationType = ModalAnimationType.FadeIn };
+
+        Modal.Show<Confirm>("FadeIn Animation", options);
+    }
+
+    void MoveInOutAnimation()
+    {
+        var options = new ModalOptions { AnimationType = ModalAnimationType.MoveInOut };
+
+        Modal.Show<Confirm>("MoveInOut Animation", options);
+    }
+
     void NoAnimation()
     {
         var options = new ModalOptions { AnimationType = ModalAnimationType.None };
@@ -59,9 +75,9 @@
     void MultipleModals()
     {
         var options = new ModalOptions
-        {
-            AnimationType = ModalAnimationType.None
-        };
+            {
+                AnimationType = ModalAnimationType.None
+            };
 
         Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);
     }
diff --git a/samples/BlazorServer/Pages/CustomLayout.razor b/samples/BlazorServer/Pages/CustomLayout.razor
index 948970ea..8d746bb1 100644
--- a/samples/BlazorServer/Pages/CustomLayout.razor
+++ b/samples/BlazorServer/Pages/CustomLayout.razor
@@ -33,6 +33,8 @@
 
 <button @onclick="ShowModalCustomLayout" class="btn btn-primary">Show Modal</button>
 
+<button @onclick="ShowAnimatedModalCustomLayout" class="btn btn-primary">Show Animated Modal</button>
+
 @code {
 
     [CascadingParameter] public IModalService Modal { get; set; } = default!;
@@ -40,8 +42,17 @@
     void ShowModalCustomLayout()
     {
         var options = new ModalOptions { UseCustomLayout = true };
-        var parameters = new ModalParameters {{nameof(CustomBootstrapModal.Message), "Hello custom modal!!"}};
+        var parameters = new ModalParameters();
+        parameters.Add(nameof(CustomBootstrapModal.Message), "Hello Bootstrap modal!!");
         Modal.Show<CustomBootstrapModal>("Custom Layout", parameters, options);
     }
 
+    void ShowAnimatedModalCustomLayout()
+    {
+        var options = new ModalOptions { UseCustomLayout = true, AnimationType = ModalAnimationType.MoveInOut };
+        var parameters = new ModalParameters();
+        parameters.Add(nameof(CustomBootstrapModal.Message), "Hello Bootstrap modal!!");
+        Modal.Show<CustomAnimatedBootstrapModal>("Custom Layout", parameters, options);
+    }
+
 }
diff --git a/samples/BlazorServer/Shared/CustomAnimatedBootstrapModal.razor b/samples/BlazorServer/Shared/CustomAnimatedBootstrapModal.razor
new file mode 100644
index 00000000..995ed77b
--- /dev/null
+++ b/samples/BlazorServer/Shared/CustomAnimatedBootstrapModal.razor
@@ -0,0 +1,29 @@
+<div class="modal d-block @BlazoredModal.OverlayAnimationClass" tabindex="-1" role="dialog">
+    <div class="modal-backdrop fade show" @onclick="Cancel"></div>
+    <div class="modal-dialog @BlazoredModal.ModalAnimationClass" style="z-index: 1050">
+        <!-- Pop it above the backdrop -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Modal title</h5>
+                <button type="button" class="btn-close" aria-label="Close" @onclick="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>@Message</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" @onclick="Close">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+
+    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
+
+    [Parameter] public string? Message { get; set; }
+
+    async Task Close() => await BlazoredModal.CloseAsync(ModalResult.Ok(true));
+    async Task Cancel() => await BlazoredModal.CancelAsync();
+
+}
\ No newline at end of file
diff --git a/samples/BlazorServer/Shared/CustomBootstrapModal.razor b/samples/BlazorServer/Shared/CustomBootstrapModal.razor
index 54572a28..6f03427c 100644
--- a/samples/BlazorServer/Shared/CustomBootstrapModal.razor
+++ b/samples/BlazorServer/Shared/CustomBootstrapModal.razor
@@ -4,9 +4,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Modal title</h5>
-                <button type="button" class="close" aria-label="Close" @onclick="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <button type="button" class="btn-close" aria-label="Close" @onclick="Close"></button>
             </div>
             <div class="modal-body">
                 <p>@Message</p>
diff --git a/samples/BlazorWebAssembly/Pages/Animation.razor b/samples/BlazorWebAssembly/Pages/Animation.razor
index ae99bdd8..d1235d8d 100644
--- a/samples/BlazorWebAssembly/Pages/Animation.razor
+++ b/samples/BlazorWebAssembly/Pages/Animation.razor
@@ -33,6 +33,8 @@
 </div>
 
 <button @onclick="AnimationDefault" class="btn btn-primary">Fade-in Fade-Out (Default)</button>
+<button @onclick="FadeInAnimation" class="btn btn-primary">Fade-in</button>
+<button @onclick="MoveInOutAnimation" class="btn btn-primary">Move-in Move-Out</button>
 <button @onclick="NoAnimation" class="btn btn-secondary">None</button>
 
 <p>
@@ -47,6 +49,20 @@
     void AnimationDefault()
     {
         Modal.Show<Confirm>("Default Animation");
+    }    
+    
+    void FadeInAnimation()
+    {
+        var options = new ModalOptions { AnimationType = ModalAnimationType.FadeIn };
+
+        Modal.Show<Confirm>("FadeIn Animation", options);
+    }    
+
+    void MoveInOutAnimation()
+    {
+        var options = new ModalOptions { AnimationType = ModalAnimationType.MoveInOut };
+
+        Modal.Show<Confirm>("MoveInOut Animation", options);
     }
 
     void NoAnimation()
diff --git a/samples/BlazorWebAssembly/Pages/CustomLayout.razor b/samples/BlazorWebAssembly/Pages/CustomLayout.razor
index 035169c1..8d746bb1 100644
--- a/samples/BlazorWebAssembly/Pages/CustomLayout.razor
+++ b/samples/BlazorWebAssembly/Pages/CustomLayout.razor
@@ -33,6 +33,8 @@
 
 <button @onclick="ShowModalCustomLayout" class="btn btn-primary">Show Modal</button>
 
+<button @onclick="ShowAnimatedModalCustomLayout" class="btn btn-primary">Show Animated Modal</button>
+
 @code {
 
     [CascadingParameter] public IModalService Modal { get; set; } = default!;
@@ -45,4 +47,12 @@
         Modal.Show<CustomBootstrapModal>("Custom Layout", parameters, options);
     }
 
+    void ShowAnimatedModalCustomLayout()
+    {
+        var options = new ModalOptions { UseCustomLayout = true, AnimationType = ModalAnimationType.MoveInOut };
+        var parameters = new ModalParameters();
+        parameters.Add(nameof(CustomBootstrapModal.Message), "Hello Bootstrap modal!!");
+        Modal.Show<CustomAnimatedBootstrapModal>("Custom Layout", parameters, options);
+    }
+
 }
diff --git a/samples/BlazorWebAssembly/Shared/CustomAnimatedBootstrapModal.razor b/samples/BlazorWebAssembly/Shared/CustomAnimatedBootstrapModal.razor
new file mode 100644
index 00000000..995ed77b
--- /dev/null
+++ b/samples/BlazorWebAssembly/Shared/CustomAnimatedBootstrapModal.razor
@@ -0,0 +1,29 @@
+<div class="modal d-block @BlazoredModal.OverlayAnimationClass" tabindex="-1" role="dialog">
+    <div class="modal-backdrop fade show" @onclick="Cancel"></div>
+    <div class="modal-dialog @BlazoredModal.ModalAnimationClass" style="z-index: 1050">
+        <!-- Pop it above the backdrop -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Modal title</h5>
+                <button type="button" class="btn-close" aria-label="Close" @onclick="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>@Message</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" @onclick="Close">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+
+    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
+
+    [Parameter] public string? Message { get; set; }
+
+    async Task Close() => await BlazoredModal.CloseAsync(ModalResult.Ok(true));
+    async Task Cancel() => await BlazoredModal.CancelAsync();
+
+}
\ No newline at end of file
diff --git a/samples/BlazorWebAssembly/Shared/CustomBootstrapModal.razor b/samples/BlazorWebAssembly/Shared/CustomBootstrapModal.razor
index b72ca686..bbb8a7dd 100644
--- a/samples/BlazorWebAssembly/Shared/CustomBootstrapModal.razor
+++ b/samples/BlazorWebAssembly/Shared/CustomBootstrapModal.razor
@@ -1,13 +1,11 @@
-<div class="modal fade show d-block" tabindex="-1" role="dialog">
+<div class="modal d-block" tabindex="-1" role="dialog">
     <div class="modal-backdrop fade show" @onclick="Cancel"></div>
     <div class="modal-dialog" style="z-index: 1050">
         <!-- Pop it above the backdrop -->
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Modal title</h5>
-                <button type="button" class="close" aria-label="Close" @onclick="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <button type="button" class="btn-close" aria-label="Close" @onclick="Close"></button>
             </div>
             <div class="modal-body">
                 <p>@Message</p>
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor b/src/Blazored.Modal/BlazoredModalInstance.razor
index 21109a27..7f420ad4 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor
@@ -1,24 +1,26 @@
 @if (UseCustomLayout)
 {
-    <CascadingValue Value="this" IsFixed="true">
-        @Content
-    </CascadingValue>
+    <div>
+        <CascadingValue Value="this" IsFixed="true">
+            @Content
+        </CascadingValue>
+    </div>
 }
 else
 {
     <div class="bm-container @Position @OverlayCustomClass @OverlayAnimationClass"
-         @ref="_modalReference" 
-         @onclick="HandleBackgroundClick">
+     @ref="_modalReference"
+     @onclick="HandleBackgroundClick">
 
         <FocusTrap @ref="FocusTrap" IsActive="ActivateFocusTrap">
-            <div class="@ModalClass" role="dialog" aria-modal="true" @onclick:stopPropagation="true">
+            <div class="@ModalClass @ModalAnimationClass" role="dialog" aria-modal="true" @onclick:stopPropagation="true">
                 @if (!HideHeader)
                 {
                     <div class="bm-header">
                         <h3 class="bm-title">@Title</h3>
                         @if (!HideCloseButton)
                         {
-                            <button type="button" class="bm-close" aria-label="close" @onclick="() => CancelAsync()" @attributes="@_closeBtnAttributes"> 
+                            <button type="button" class="bm-close" aria-label="close" @onclick="() => CancelAsync()" @attributes="@_closeBtnAttributes">
                                 <span>&times;</span>
                             </button>
                         }
@@ -31,6 +33,6 @@ else
                 </div>
             </div>
         </FocusTrap>
-        
+
     </div>
 }
\ No newline at end of file
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.cs b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
index 5fc5ca2c..c5529c35 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.cs
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
@@ -19,7 +19,8 @@ public partial class BlazoredModalInstance : IDisposable
     private bool HideHeader { get; set; }
     private bool HideCloseButton { get; set; }
     private bool DisableBackgroundCancel { get; set; }
-    private string? OverlayAnimationClass { get; set; }
+    public string? ModalAnimationClass { get; set; }
+    public string? OverlayAnimationClass { get; set; }
     private string? OverlayCustomClass { get; set; }
     private ModalAnimationType? AnimationType { get; set; }
     private bool ActivateFocusTrap { get; set; }
@@ -93,9 +94,21 @@ public async Task CloseAsync()
     public async Task CloseAsync(ModalResult modalResult)
     {
         // Fade out the modal, and after that actually remove it
-        if (AnimationType is ModalAnimationType.FadeInOut)
+        if (AnimationType is not ModalAnimationType.None && AnimationType is not ModalAnimationType.FadeIn && AnimationType is not ModalAnimationType.MoveIn)
         {
-            OverlayAnimationClass += " fade-out";
+            OverlayAnimationClass = AnimationType switch
+            {
+                ModalAnimationType.FadeInOut or ModalAnimationType.FadeOut or
+                ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut => "blazored-fade-out",
+                _ => string.Empty,
+            };
+            
+            ModalAnimationClass = AnimationType switch
+            {
+                ModalAnimationType.FadeInOut or ModalAnimationType.FadeOut => "blazored-fade-out",
+                ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut => "blazored-move-out",
+                _ => string.Empty,
+            };
             StateHasChanged();
             
             await Task.Delay(400); // Needs to be a bit more than the animation time because of delays in the animation being applied between server and client (at least when using blazor server side), I think.
@@ -118,16 +131,17 @@ public async Task CancelAsync<TPayload>(TPayload payload)
 
     private void ConfigureInstance()
     {
+        UseCustomLayout = SetUseCustomLayout();
         AnimationType = SetAnimation();
         Position = SetPosition();
         ModalClass = SetModalClass();
         HideHeader = SetHideHeader();
         HideCloseButton = SetHideCloseButton();
         DisableBackgroundCancel = SetDisableBackgroundCancel();
-        UseCustomLayout = SetUseCustomLayout();
         OverlayCustomClass = SetOverlayCustomClass();
         ActivateFocusTrap = SetActivateFocusTrap();
-        OverlayAnimationClass = SetAnimationClass();
+        OverlayAnimationClass = SetOverlayAnimationClass();
+        ModalAnimationClass = SetModalAnimationClass();
         Parent.OnModalClosed += AttemptFocus;
     }
 
@@ -265,11 +279,22 @@ private string SetModalClass()
         return modalClass;
     }
 
-    private ModalAnimationType SetAnimation() 
-        => Options.AnimationType ?? GlobalModalOptions.AnimationType ?? ModalAnimationType.FadeInOut;
+    private ModalAnimationType SetAnimation()
+        => Options.AnimationType ?? GlobalModalOptions.AnimationType ?? (!UseCustomLayout ? ModalAnimationType.FadeInOut : ModalAnimationType.None);
 
-    private string SetAnimationClass() 
-        => AnimationType is ModalAnimationType.FadeInOut ? "fade-in" : string.Empty;
+    private string SetOverlayAnimationClass() => AnimationType switch
+    {
+        ModalAnimationType.FadeInOut or ModalAnimationType.FadeIn or
+        ModalAnimationType.MoveInOut or ModalAnimationType.MoveIn => "blazored-fade-in",
+        _ => string.Empty
+    };    
+    
+    private string SetModalAnimationClass() => AnimationType switch
+    {
+        ModalAnimationType.FadeInOut or ModalAnimationType.FadeIn => "blazored-fade-in",
+        ModalAnimationType.MoveInOut or ModalAnimationType.MoveIn => "blazored-move-in",
+        _ => string.Empty
+    };
 
     private bool SetHideHeader()
     {
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.css b/src/Blazored.Modal/BlazoredModalInstance.razor.css
index f89e8713..e446b1c4 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.css
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.css
@@ -102,31 +102,60 @@
     justify-content: center;
 }
 
-.fade-in {
-   animation: 300ms ease-out 0s ModalFadeIn;
+.blazored-fade-in, ::deep .blazored-fade-in {
+    animation: 300ms ease-out 0s ModalFadeIn;
 }
 
-.fade-out  {
-   animation: 300ms ease-out 0s ModalFadeOut;
-   opacity: 0;
+.blazored-fade-out, ::deep .blazored-fade-out {
+    animation: 300ms ease-out 0s ModalFadeOut;
+    opacity: 0;
 }
 
 @keyframes ModalFadeIn {
-     0% {
-         opacity: 0;
-     }
+    0% {
+        opacity: 0;
+    }
 
-     100% {
-         opacity: 1;
-     }
- }
+    100% {
+        opacity: 1;
+    }
+}
 
 @keyframes ModalFadeOut {
-     0% {
-         opacity: 1;
-     }
-
-     100% {
-         opacity: 0;
-     }
- }
\ No newline at end of file
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.blazored-move-in, ::deep .blazored-move-in {
+    animation: 300ms ease-out 0s ModalMoveIn;
+}
+
+.blazored-move-out, ::deep .blazored-move-out {
+    animation: 300ms ease-out 0s ModalMoveOut;
+    transform: translate(0, -50px);
+}
+
+@keyframes ModalMoveIn {
+    0% {
+        transform: translate(0, -50px);
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+@keyframes ModalMoveOut {
+    0% {
+        transform: none;
+    }
+
+    100% {
+        transform: translate(0, -50px);
+    }
+}
diff --git a/src/Blazored.Modal/Configuration/ModalAnimationType.cs b/src/Blazored.Modal/Configuration/ModalAnimationType.cs
index 17f7c076..ff6586c5 100644
--- a/src/Blazored.Modal/Configuration/ModalAnimationType.cs
+++ b/src/Blazored.Modal/Configuration/ModalAnimationType.cs
@@ -3,5 +3,10 @@
 public enum ModalAnimationType
 {
     FadeInOut,
+    FadeIn,
+    FadeOut,
+    MoveInOut,
+    MoveIn,
+    MoveOut,
     None
 }
\ No newline at end of file

From 3c51dc02ebe39cfc83be33dcf5192c990e340456 Mon Sep 17 00:00:00 2001
From: Jorge Osta <jorgeosta04@gmail.com>
Date: Tue, 20 Feb 2024 17:43:00 +0100
Subject: [PATCH 2/5] Fix blank lines

---
 samples/InteractiveServer/Components/Pages/Animation.razor | 6 +++---
 src/Blazored.Modal/BlazoredModalInstance.razor             | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/samples/InteractiveServer/Components/Pages/Animation.razor b/samples/InteractiveServer/Components/Pages/Animation.razor
index 5e9811d2..7dcc6589 100644
--- a/samples/InteractiveServer/Components/Pages/Animation.razor
+++ b/samples/InteractiveServer/Components/Pages/Animation.razor
@@ -91,9 +91,9 @@
     void MultipleModals()
     {
         var options = new ModalOptions
-            {
-                AnimationType = ModalAnimationType.None
-            };
+        {
+            AnimationType = ModalAnimationType.None
+        };
 
         Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);
     }
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor b/src/Blazored.Modal/BlazoredModalInstance.razor
index 6f06f68c..c38d7781 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor
@@ -38,6 +38,5 @@ else
                 </div>
             </div>
         </FocusTrap>
-
     </div>
 }
\ No newline at end of file

From d3e2f5b7c7b3d10b24d44c03c3acebcc7225b0df Mon Sep 17 00:00:00 2001
From: Jorge Osta <jorgeosta04@gmail.com>
Date: Tue, 20 Feb 2024 23:11:29 +0100
Subject: [PATCH 3/5] Rename css classes

---
 .../BlazoredModalInstance.razor.cs               | 16 ++++++++--------
 .../BlazoredModalInstance.razor.css              | 12 ++++++------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.cs b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
index 682846dd..1ba9e6f9 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.cs
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
@@ -103,15 +103,15 @@ public async Task CloseAsync(ModalResult modalResult)
             {
                 ModalAnimationType.FadeInOut or ModalAnimationType.FadeOut or
                 ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut or
-                ModalAnimationType.PopInOut => "blazored-fade-out",
+                ModalAnimationType.PopInOut => "fade-out",
                 _ => string.Empty,
             };
             
             ModalAnimationClass = AnimationType switch
             {
-                ModalAnimationType.FadeInOut or ModalAnimationType.FadeOut => "blazored-fade-out",
-                ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut => "blazored-move-out",
-                ModalAnimationType.PopInOut => "blazored-pop-out",
+                ModalAnimationType.FadeInOut or ModalAnimationType.FadeOut => "fade-out",
+                ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut => "move-out",
+                ModalAnimationType.PopInOut => "pop-out",
                 _ => string.Empty,
             };
             StateHasChanged();
@@ -291,15 +291,15 @@ private ModalAnimationType SetAnimation()
     {
         ModalAnimationType.FadeInOut or ModalAnimationType.FadeIn or
         ModalAnimationType.MoveInOut or ModalAnimationType.MoveIn or
-        ModalAnimationType.PopInOut or ModalAnimationType.PopIn => "blazored-fade-in",
+        ModalAnimationType.PopInOut or ModalAnimationType.PopIn => "fade-in",
         _ => string.Empty
     };
 
     private string SetModalAnimationClass() => AnimationType switch
     {
-        ModalAnimationType.FadeInOut or ModalAnimationType.FadeIn => "blazored-fade-in",
-        ModalAnimationType.MoveInOut or ModalAnimationType.MoveIn => "blazored-move-in",
-        ModalAnimationType.PopInOut or ModalAnimationType.PopIn => "blazored-pop-in",
+        ModalAnimationType.FadeInOut or ModalAnimationType.FadeIn => "fade-in",
+        ModalAnimationType.MoveInOut or ModalAnimationType.MoveIn => "move-in",
+        ModalAnimationType.PopInOut or ModalAnimationType.PopIn => "pop-in",
         _ => string.Empty,
     };
 
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.css b/src/Blazored.Modal/BlazoredModalInstance.razor.css
index 7ac316aa..0a61c9a1 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.css
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.css
@@ -102,11 +102,11 @@
     align-items: center;
 }
 
-.blazored-fade-in, ::deep .blazored-fade-in {
+.fade-in, ::deep .fade-in {
     animation: 300ms ease-out 0s ModalFadeIn;
 }
 
-.blazored-fade-out, ::deep .blazored-fade-out {
+.fade-out, ::deep .fade-out {
     animation: 300ms ease-out 0s ModalFadeOut;
     opacity: 0;
 }
@@ -131,11 +131,11 @@
     }
 }
 
-.blazored-move-in, ::deep .blazored-move-in {
+.move-in, ::deep .move-in {
     animation: 300ms ease-out 0s ModalMoveIn;
 }
 
-.blazored-move-out, ::deep .blazored-move-out {
+.move-out, ::deep .move-out {
     animation: 300ms ease-out 0s ModalMoveOut;
     transform: translate(0, -50px);
 }
@@ -160,11 +160,11 @@
     }
 }
 
-.blazored-pop-in, ::deep .blazored-pop-in {
+.pop-in, ::deep .pop-in {
     animation: 300ms ease-out 0s ModalPopIn;
 }
 
-.blazored-pop-out, ::deep .blazored-pop-out {
+.pop-out, ::deep .pop-out {
     animation: 300ms ease-in 0s ModalPopOut;
     transform: scale(0%);
 }

From f8424faa574b30d79844ec7a2b0d9f78bdc5b5e0 Mon Sep 17 00:00:00 2001
From: Jorge Osta <jorgeosta04@gmail.com>
Date: Tue, 20 Feb 2024 23:25:52 +0100
Subject: [PATCH 4/5] Workaround FocusTrap

---
 src/Blazored.Modal/BlazoredModalInstance.razor.cs | 4 +++-
 src/Blazored.Modal/FocusTrap.razor                | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.cs b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
index 1ba9e6f9..5c1fb73f 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.cs
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
@@ -106,7 +106,9 @@ ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut or
                 ModalAnimationType.PopInOut => "fade-out",
                 _ => string.Empty,
             };
-            
+
+            FocusTrap?.SetShouldRender();
+
             ModalAnimationClass = AnimationType switch
             {
                 ModalAnimationType.FadeInOut or ModalAnimationType.FadeOut => "fade-out",
diff --git a/src/Blazored.Modal/FocusTrap.razor b/src/Blazored.Modal/FocusTrap.razor
index a6e11e7f..59e05508 100644
--- a/src/Blazored.Modal/FocusTrap.razor
+++ b/src/Blazored.Modal/FocusTrap.razor
@@ -13,12 +13,16 @@
     private ElementReference _endFirst;
     private ElementReference _endSecond;
     private bool _shiftPressed;
+    private bool _shouldRender = false;
 
     [Parameter] public RenderFragment ChildContent { get; set; } = default!;
     [Parameter] public bool IsActive { get; set; }
 
     protected override bool ShouldRender()
-        => false;
+        => _shouldRender;
+
+    public void SetShouldRender(bool shouldRender = true)
+        => _shouldRender = shouldRender;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {

From a228f8c3c415a16fb0934ae00571a42ff9cfa4c3 Mon Sep 17 00:00:00 2001
From: Jorge Osta <jorgeosta04@gmail.com>
Date: Fri, 23 Feb 2024 20:03:16 +0100
Subject: [PATCH 5/5] Change FocusTrap ShouldRender

---
 src/Blazored.Modal/BlazoredModalInstance.razor.cs | 3 ++-
 src/Blazored.Modal/FocusTrap.razor                | 9 ++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.cs b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
index 5c1fb73f..d592ce42 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.cs
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
@@ -107,7 +107,7 @@ ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut or
                 _ => string.Empty,
             };
 
-            FocusTrap?.SetShouldRender();
+            FocusTrap?.TriggerRender();
 
             ModalAnimationClass = AnimationType switch
             {
@@ -116,6 +116,7 @@ ModalAnimationType.MoveInOut or ModalAnimationType.MoveOut or
                 ModalAnimationType.PopInOut => "pop-out",
                 _ => string.Empty,
             };
+
             StateHasChanged();
             
             await Task.Delay(400); // Needs to be a bit more than the animation time because of delays in the animation being applied between server and client (at least when using blazor server side), I think.
diff --git a/src/Blazored.Modal/FocusTrap.razor b/src/Blazored.Modal/FocusTrap.razor
index 59e05508..99f458f1 100644
--- a/src/Blazored.Modal/FocusTrap.razor
+++ b/src/Blazored.Modal/FocusTrap.razor
@@ -21,9 +21,12 @@
     protected override bool ShouldRender()
         => _shouldRender;
 
-    public void SetShouldRender(bool shouldRender = true)
-        => _shouldRender = shouldRender;
-
+    public void TriggerRender()
+    {
+        _shouldRender = true;
+        StateHasChanged();
+        _shouldRender = false;
+    }
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)