Improving animation states

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;
 

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;
 

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;
 

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;
 

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

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;

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;
 

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;
 

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