Improving animation states (#5329)

* AnimationEnd | Null check SelectedSlide (#5312) * SnackbarInfo Initialize IntervalBeforeClose correctly (#5313) * ModalService | Refactor to capture the Action<ModalProviderParameterBuilder<TComponent>> and re-evaluate to sync with any user parameter changes (#5322) * wip hiding and showing states * Refactorting modal animations * Use keyframes for BS5 and BS5 modal animation * Combine animations for centered modals * Fix Tailwind * Reformat merge conflict * Add comments --------- Co-authored-by: David Moreira <[email protected]>
Megabit · Feb 27, 2024 · da543e1 · da543e1
1 parent ff0567e
commit da543e1
Show file tree

Hide file tree

Showing 37 changed files with 595 additions and 120 deletions.
diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -877,9 +877,7 @@ public override string Display( DisplayType displayType, DisplayDefinition displ
 
     public override string Modal() => "ant-modal-root";
 
-    public override string ModalFade() => Fade();
-
-    public override string ModalFade( bool animation ) => animation ? Fade() : null;
+    public override string ModalFade( bool showing, bool hiding ) => showing || hiding ? Fade() : null;
 
     public override string ModalVisible( bool visible ) => null;
 

diff --git a/Source/Blazorise.AntDesign/AntDesignStyleProvider.cs b/Source/Blazorise.AntDesign/AntDesignStyleProvider.cs
@@ -11,7 +11,13 @@ public class AntDesignStyleProvider : StyleProvider
 
     public override int DefaultModalBackdropZIndex => 1000;
 
-    public override string ModalShow() => "display: block;";
+    public override string ModalShow( bool visible ) => visible ? "display: block" : null;
+
+    public override string ModalFade( bool showing, bool hiding ) => null;
+
+    public override string ModalAnimationDuration( bool animated, int animationDuration ) => animated
+        ? $"--modal-animation-duration: {animationDuration}ms"
+        : "--modal-animation-duration: 0ms";
 
     int ModalZIndexDiff => DefaultModalZIndex - DefaultModalBackdropZIndex;
 

diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs
@@ -887,9 +887,11 @@ public override string Display( DisplayType displayType, DisplayDefinition displ
 
     public override string Modal() => "modal";
 
-    public override string ModalFade() => Fade();
-
-    public override string ModalFade( bool animation ) => animation ? Fade() : null;
+    public override string ModalFade( bool showing, bool hiding ) => showing
+        ? "showing"
+        : hiding
+            ? "hiding"
+            : null;
 
     public override string ModalVisible( bool visible ) => visible ? Show() : null;
 

diff --git a/Source/Blazorise.Bootstrap/BootstrapStyleProvider.cs b/Source/Blazorise.Bootstrap/BootstrapStyleProvider.cs
@@ -11,7 +11,13 @@ public class BootstrapStyleProvider : StyleProvider
 
     public override int DefaultModalBackdropZIndex => 1040;
 
-    public override string ModalShow() => "display: block";
+    public override string ModalShow( bool visible ) => null;
+
+    public override string ModalFade( bool showing, bool hiding ) => null;
+
+    public override string ModalAnimationDuration( bool animated, int animationDuration ) => animated
+        ? $"--modal-animation-duration: {animationDuration}ms"
+        : "--modal-animation-duration: 0ms";
 
     int ModalZIndexDiff => DefaultModalZIndex - DefaultModalBackdropZIndex;
 

diff --git a/Source/Blazorise.Bootstrap/Styles/components/_modal.scss b/Source/Blazorise.Bootstrap/Styles/components/_modal.scss
@@ -24,12 +24,94 @@
         }
     }
 
-    &.fade {
-        transition: opacity var(--modal-animation-duration, 300ms) linear;
+    &.show {
+        display: block;
 
         .modal-dialog {
-            transition: -webkit-transform var(--modal-animation-duration, 300ms) ease-out;
-            transition: transform var(--modal-animation-duration, 300ms) ease-out;
+            &:not(.modal-dialog-centered) {
+                animation: modal-slidein var(--modal-animation-duration, 300ms) ease-out;
+            }
+
+            &.modal-dialog-centered {
+                animation: modal-slidein, modal-slidein-centered var(--modal-animation-duration, 300ms) ease-out;
+            }
+        }
+    }
+
+    &:not(.show) {
+        display: none;
+        animation: modal-slideaway var(--modal-animation-duration, 300ms) linear;
+
+        .modal-dialog {
+            &:not(.modal-dialog-centered) {
+                animation: modal-slideaway var(--modal-animation-duration, 300ms) ease-out;
+            }
+
+            &.modal-dialog-centered {
+                animation: modal-slideaway, modal-slideaway-centered var(--modal-animation-duration, 300ms) ease-out;
+            }
         }
     }
 }
+
+.modal-backdrop.fade {
+    transition-property: opacity;
+    transition-duration: var(--modal-animation-duration, 300ms);
+    transition-timing-function: linear;
+}
+
+@keyframes modal-slidein {
+    0% {
+        display: none;
+        opacity: 0;
+        transform: $modal-fade-transform;
+    }
+
+    1% {
+        display: block;
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes modal-slidein-centered {
+    0% {
+        display: none;
+        opacity: 0;
+        transform: $modal-fade-transform;
+    }
+
+    100% {
+        display: flex;
+        align-items: center;
+        opacity: 1;
+    }
+}
+
+@keyframes modal-slideaway {
+    from {
+        display: block;
+        opacity: 1;
+    }
+
+    to {
+        transform: $modal-fade-transform;
+        opacity: 0;
+    }
+}
+
+@keyframes modal-slideaway-centered {
+    from {
+        display: flex;
+        align-items: center;
+        opacity: 1;
+    }
+
+    to {
+        transform: $modal-fade-transform;
+        opacity: 0;
+    }
+}
diff --git a/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.css b/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.css
@@ -846,14 +846,79 @@ li.list-group-item-action {
 .modal .modal-fullscreen .modal-footer {
   border-radius: 0;
 }
-.modal.fade {
-  transition: opacity var(--modal-animation-duration, 300ms) linear;
+.modal.show {
+  display: block;
+}
+.modal.show .modal-dialog:not(.modal-dialog-centered) {
+  animation: modal-slidein var(--modal-animation-duration, 300ms) ease-out;
+}
+.modal.show .modal-dialog.modal-dialog-centered {
+  animation: modal-slidein, modal-slidein-centered var(--modal-animation-duration, 300ms) ease-out;
+}
+.modal:not(.show) {
+  display: none;
+  animation: modal-slideaway var(--modal-animation-duration, 300ms) linear;
 }
-.modal.fade .modal-dialog {
-  transition: -webkit-transform var(--modal-animation-duration, 300ms) ease-out;
-  transition: transform var(--modal-animation-duration, 300ms) ease-out;
+.modal:not(.show) .modal-dialog:not(.modal-dialog-centered) {
+  animation: modal-slideaway var(--modal-animation-duration, 300ms) ease-out;
+}
+.modal:not(.show) .modal-dialog.modal-dialog-centered {
+  animation: modal-slideaway, modal-slideaway-centered var(--modal-animation-duration, 300ms) ease-out;
+}
+
+.modal-backdrop.fade {
+  transition-property: opacity;
+  transition-duration: var(--modal-animation-duration, 300ms);
+  transition-timing-function: linear;
 }
 
+@keyframes modal-slidein {
+  0% {
+    display: none;
+    opacity: 0;
+    transform: translate(0, -50px);
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes modal-slidein-centered {
+  0% {
+    display: none;
+    opacity: 0;
+    transform: translate(0, -50px);
+  }
+  100% {
+    display: flex;
+    align-items: center;
+    opacity: 1;
+  }
+}
+@keyframes modal-slideaway {
+  from {
+    display: block;
+    opacity: 1;
+  }
+  to {
+    transform: translate(0, -50px);
+    opacity: 0;
+  }
+}
+@keyframes modal-slideaway-centered {
+  from {
+    display: flex;
+    align-items: center;
+    opacity: 1;
+  }
+  to {
+    transform: translate(0, -50px);
+    opacity: 0;
+  }
+}
 .offcanvas, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
   --offcanvas-zindex: 1045;
   --offcanvas-width: 400px;

diff --git a/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.min.css b/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.min.css
diff --git a/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs b/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs
@@ -880,9 +880,11 @@ public override string Display( DisplayType displayType, DisplayDefinition displ
 
     public override string Modal() => "modal";
 
-    public override string ModalFade() => Fade();
-
-    public override string ModalFade( bool animation ) => animation ? Fade() : null;
+    public override string ModalFade( bool showing, bool hiding ) => showing
+        ? "showing"
+        : hiding
+            ? "hiding"
+            : null;
 
     public override string ModalVisible( bool visible ) => visible ? Show() : null;
 

diff --git a/Source/Blazorise.Bootstrap5/Bootstrap5StyleProvider.cs b/Source/Blazorise.Bootstrap5/Bootstrap5StyleProvider.cs
@@ -11,7 +11,13 @@ public class Bootstrap5StyleProvider : StyleProvider
 
     public override int DefaultModalBackdropZIndex => 1050;
 
-    public override string ModalShow() => "display: block;";
+    public override string ModalShow( bool visible ) => null;
+
+    public override string ModalFade( bool showing, bool hiding ) => null;
+
+    public override string ModalAnimationDuration( bool animated, int animationDuration ) => animated
+        ? $"--modal-animation-duration: {animationDuration}ms"
+        : "--modal-animation-duration: 0ms";
 
     int ModalZIndexDiff => DefaultModalZIndex - DefaultModalBackdropZIndex;
 

diff --git a/Source/Blazorise.Bootstrap5/Styles/components/_modal.scss b/Source/Blazorise.Bootstrap5/Styles/components/_modal.scss
@@ -1,10 +1,92 @@
 .modal {
-    &.fade {
-        transition: opacity var(--modal-animation-duration, 300ms) linear;
+    &.show {
+        display: block;
 
         .modal-dialog {
-            transition: -webkit-transform var(--modal-animation-duration, 300ms) ease-out;
-            transition: transform var(--modal-animation-duration, 300ms) ease-out;
+            &:not(.modal-dialog-centered) {
+                animation: modal-slidein var(--modal-animation-duration, 300ms) ease-out;
+            }
+
+            &.modal-dialog-centered {
+                animation: modal-slidein, modal-slidein-centered var(--modal-animation-duration, 300ms) ease-out;
+            }
+        }
+    }
+
+    &:not(.show) {
+        display: none;
+        animation: modal-slideaway var(--modal-animation-duration, 300ms) linear;
+
+        .modal-dialog {
+            &:not(.modal-dialog-centered) {
+                animation: modal-slideaway var(--modal-animation-duration, 300ms) ease-out;
+            }
+
+            &.modal-dialog-centered {
+                animation: modal-slideaway, modal-slideaway-centered var(--modal-animation-duration, 300ms) ease-out;
+            }
         }
     }
 }
+
+.modal-backdrop.fade {
+    transition-property: opacity;
+    transition-duration: var(--modal-animation-duration, 300ms);
+    transition-timing-function: linear;
+}
+
+@keyframes modal-slidein {
+    0% {
+        display: none;
+        opacity: 0;
+        transform: $modal-fade-transform;
+    }
+
+    1% {
+        display: block;
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes modal-slidein-centered {
+    0% {
+        display: none;
+        opacity: 0;
+        transform: $modal-fade-transform;
+    }
+
+    100% {
+        display: flex;
+        align-items: center;
+        opacity: 1;
+    }
+}
+
+@keyframes modal-slideaway {
+    from {
+        display: block;
+        opacity: 1;
+    }
+
+    to {
+        transform: $modal-fade-transform;
+        opacity: 0;
+    }
+}
+
+@keyframes modal-slideaway-centered {
+    from {
+        display: flex;
+        align-items: center;
+        opacity: 1;
+    }
+
+    to {
+        transform: $modal-fade-transform;
+        opacity: 0;
+    }
+}