From 898e88d224546a09e7718576fae8b418a91db063 Mon Sep 17 00:00:00 2001
From: Aleksejs Sergejevs <17292064+Quickz@users.noreply.github.com>
Date: Tue, 20 Feb 2024 01:47:58 +0200
Subject: [PATCH] Added two new animation types (#453)

* added two new animation types

* Update samples/BlazorWebAssembly/Pages/Animation.razor

Co-authored-by: Lars Koopmans <larsk2009@live.nl>

---------

Co-authored-by: Lars Koopmans <larsk2009@live.nl>
Co-authored-by: Chris Sainty <chrissainty@users.noreply.github.com>
---
 .../BlazorWebAssembly/Pages/Animation.razor   | 18 ++++++++-
 .../BlazoredModalInstance.razor.cs            | 15 ++++++-
 .../BlazoredModalInstance.razor.css           | 39 ++++++++++++++++++-
 .../Configuration/ModalAnimationType.cs       |  4 +-
 4 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/samples/BlazorWebAssembly/Pages/Animation.razor b/samples/BlazorWebAssembly/Pages/Animation.razor
index ae99bdd8..5960ddbd 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="AnimationPopInOut" class="btn btn-primary">Pop-in Pop-Out</button>
+<button @onclick="AnimationPopIn" class="btn btn-primary">Pop-in</button>
 <button @onclick="NoAnimation" class="btn btn-secondary">None</button>
 
 <p>
@@ -49,6 +51,20 @@
         Modal.Show<Confirm>("Default Animation");
     }
 
+    void AnimationPopInOut()
+    {
+        var options = new ModalOptions { AnimationType = ModalAnimationType.PopInOut };
+
+        Modal.Show<Confirm>("Animation Type: PopInOut", options);
+    }
+
+    void AnimationPopIn()
+    {
+        var options = new ModalOptions { AnimationType = ModalAnimationType.PopIn };
+
+        Modal.Show<Confirm>("Animation Type: PopIn", options);
+    }
+
     void NoAnimation()
     {
         var options = new ModalOptions { AnimationType = ModalAnimationType.None };
@@ -65,4 +81,4 @@
 
         Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);
     }
-}
\ No newline at end of file
+}
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.cs b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
index e0b9e889..a0945851 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.cs
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
@@ -101,6 +101,13 @@ public async Task CloseAsync(ModalResult modalResult)
             
             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.
         }
+        else if (AnimationType is ModalAnimationType.PopInOut)
+        {
+            OverlayAnimationClass += " pop-out";
+            StateHasChanged();
+
+            await Task.Delay(400);
+        }
 
         await Parent.DismissInstance(Id, modalResult);
     }
@@ -269,8 +276,12 @@ private string SetModalClass()
     private ModalAnimationType SetAnimation() 
         => Options.AnimationType ?? GlobalModalOptions.AnimationType ?? ModalAnimationType.FadeInOut;
 
-    private string SetAnimationClass() 
-        => AnimationType is ModalAnimationType.FadeInOut ? "fade-in" : string.Empty;
+    private string SetAnimationClass() => AnimationType switch
+    {
+        ModalAnimationType.FadeInOut => "fade-in",
+        ModalAnimationType.PopInOut or ModalAnimationType.PopIn => "pop-in",
+        _ => string.Empty,
+    };
 
     private bool SetHideHeader()
     {
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.css b/src/Blazored.Modal/BlazoredModalInstance.razor.css
index f89e8713..97c404c7 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.css
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.css
@@ -129,4 +129,41 @@
      100% {
          opacity: 0;
      }
- }
\ No newline at end of file
+ }
+
+.bm-container.pop-in .blazored-modal {
+    animation: 200ms ease-out 0s ModalPopIn;
+}
+
+.bm-container.pop-out .blazored-modal {
+    animation: 300ms ease-in 0s ModalPopOut;
+    transform: scale(0%);
+}
+
+@keyframes ModalPopIn {
+    0% {
+        transform: scale(0%);
+    }
+
+    50% {
+        transform: scale(110%);
+    }
+
+    100% {
+        transform: scale(100%);
+    }
+}
+
+@keyframes ModalPopOut {
+    0% {
+        transform: scale(100%);
+    }
+
+    50% {
+        transform: scale(110%);
+    }
+
+    100% {
+        transform: scale(0%);
+    }
+}
diff --git a/src/Blazored.Modal/Configuration/ModalAnimationType.cs b/src/Blazored.Modal/Configuration/ModalAnimationType.cs
index 17f7c076..172fbebf 100644
--- a/src/Blazored.Modal/Configuration/ModalAnimationType.cs
+++ b/src/Blazored.Modal/Configuration/ModalAnimationType.cs
@@ -3,5 +3,7 @@
 public enum ModalAnimationType
 {
     FadeInOut,
+    PopInOut,
+    PopIn,
     None
-}
\ No newline at end of file
+}