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