Added two new animation types (#453)

* added two new animation types

* Update samples/BlazorWebAssembly/Pages/Animation.razor

Co-authored-by: Lars Koopmans <[email protected]>

---------

Co-authored-by: Lars Koopmans <[email protected]>
Co-authored-by: Chris Sainty <[email protected]>

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);
     }
-}
+}

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()
     {

src/Blazored.Modal/BlazoredModalInstance.razor.css

@@ -129,4 +129,41 @@
      100% {
          opacity: 0;
      }
- }
+ }
+
+.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%);
+    }
+}

src/Blazored.Modal/Configuration/ModalAnimationType.cs

@@ -3,5 +3,7 @@
 public enum ModalAnimationType
 {
     FadeInOut,
+    PopInOut,
+    PopIn,
     None
-}
+}