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 @@
+
+
@@ -49,6 +51,20 @@
Modal.Show("Default Animation");
}
+ void AnimationPopInOut()
+ {
+ var options = new ModalOptions { AnimationType = ModalAnimationType.PopInOut };
+
+ Modal.Show("Animation Type: PopInOut", options);
+ }
+
+ void AnimationPopIn()
+ {
+ var options = new ModalOptions { AnimationType = ModalAnimationType.PopIn };
+
+ Modal.Show("Animation Type: PopIn", options);
+ }
+
void NoAnimation()
{
var options = new ModalOptions { AnimationType = ModalAnimationType.None };
@@ -65,4 +81,4 @@
Modal.Show("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
+}