Refactorting modal animations

Source/Blazorise.AntDesign/AntDesignClassProvider.cs

@@ -877,13 +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 showing, bool hiding ) => showing
-        ? Show()
-        : hiding
-            ? 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,12 +887,10 @@ public override string Display( DisplayType displayType, DisplayDefinition displ
 
     public override string Modal() => "modal";
 
-    public override string ModalFade() => Fade();
-
     public override string ModalFade( bool showing, bool hiding ) => showing
-        ? Show()
+        ? "showing"
         : hiding
-            ? Fade()
+            ? "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,38 @@
         }
     }
 
-    &.fade {
-        transition: opacity var(--modal-animation-duration, 300ms) linear;
+    display: block;
+    visibility: hidden;
 
+    &:not(.show) {
         .modal-dialog {
-            transition: -webkit-transform var(--modal-animation-duration, 300ms) ease-out;
-            transition: transform var(--modal-animation-duration, 300ms) ease-out;
+            opacity: 0;
         }
     }
+
+    &.showing,
+    &.show {
+        .modal-dialog {
+            opacity: 1;
+        }
+
+        visibility: visible;
+    }
+
+    transition-property: opacity visibility;
+    transition-duration: var(--modal-animation-duration, 300ms);
+    transition-timing-function: linear;
+
+    .modal-dialog {
+        transition-property: opacity visibility transform;
+        transition-duration: var(--modal-animation-duration, 300ms);
+        transition-timing-function: ease-out;
+        transform: translate(0,-50px);
+    }
+}
+
+.modal-backdrop.fade {
+    transition-property: opacity;
+    transition-duration: var(--modal-animation-duration, 300ms);
+    transition-timing-function: linear;
 }

Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.css

@@ -826,6 +826,13 @@ li.list-group-item-action {
   overflow-y: scroll;
 }
 
+.modal {
+  display: block;
+  visibility: hidden;
+  transition-property: opacity visibility;
+  transition-duration: var(--modal-animation-duration, 300ms);
+  transition-timing-function: linear;
+}
 .modal .modal-fullscreen {
   width: 100vw;
   max-width: none;
@@ -846,12 +853,26 @@ li.list-group-item-action {
 .modal .modal-fullscreen .modal-footer {
   border-radius: 0;
 }
-.modal.fade {
-  transition: opacity var(--modal-animation-duration, 300ms) linear;
+.modal:not(.show) .modal-dialog {
+  opacity: 0;
+}
+.modal.showing, .modal.show {
+  visibility: visible;
+}
+.modal.showing .modal-dialog, .modal.show .modal-dialog {
+  opacity: 1;
 }
-.modal.fade .modal-dialog {
-  transition: -webkit-transform var(--modal-animation-duration, 300ms) ease-out;
-  transition: transform var(--modal-animation-duration, 300ms) ease-out;
+.modal .modal-dialog {
+  transition-property: opacity visibility transform;
+  transition-duration: var(--modal-animation-duration, 300ms);
+  transition-timing-function: ease-out;
+  transform: translate(0, -50px);
+}
+
+.modal-backdrop.fade {
+  transition-property: opacity;
+  transition-duration: var(--modal-animation-duration, 300ms);
+  transition-timing-function: linear;
 }
 
 .offcanvas, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {

Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs

@@ -880,12 +880,10 @@ public override string Display( DisplayType displayType, DisplayDefinition displ
 
     public override string Modal() => "modal";
 
-    public override string ModalFade() => Fade();
-
     public override string ModalFade( bool showing, bool hiding ) => showing
-        ? Show()
+        ? "showing"
         : hiding
-            ? Fade()
+            ? "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,36 @@
 .modal {
-    &.fade {
-        transition: opacity var(--modal-animation-duration, 300ms) linear;
+    display: block;
+    visibility: hidden;
 
+    &:not(.show) {
         .modal-dialog {
-            transition: -webkit-transform var(--modal-animation-duration, 300ms) ease-out;
-            transition: transform var(--modal-animation-duration, 300ms) ease-out;
+            opacity: 0;
         }
     }
+
+    &.showing,
+    &.show {
+        .modal-dialog {
+            opacity: 1;
+        }
+
+        visibility: visible;
+    }
+
+    transition-property: opacity visibility;
+    transition-duration: var(--modal-animation-duration, 300ms);
+    transition-timing-function: linear;
+
+    .modal-dialog {
+        transition-property: opacity visibility transform;
+        transition-duration: var(--modal-animation-duration, 300ms);
+        transition-timing-function: ease-out;
+        transform: translate(0,-50px);
+    }
+}
+
+.modal-backdrop.fade {
+    transition-property: opacity;
+    transition-duration: var(--modal-animation-duration, 300ms);
+    transition-timing-function: linear;
 }

Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.css

@@ -986,12 +986,33 @@ li.list-group-item-action {
   flex: 1;
 }
 
-.modal.fade {
-  transition: opacity var(--modal-animation-duration, 300ms) linear;
+.modal {
+  display: block;
+  visibility: hidden;
+  transition-property: opacity visibility;
+  transition-duration: var(--modal-animation-duration, 300ms);
+  transition-timing-function: linear;
+}
+.modal:not(.show) .modal-dialog {
+  opacity: 0;
+}
+.modal.showing, .modal.show {
+  visibility: visible;
 }
-.modal.fade .modal-dialog {
-  transition: -webkit-transform var(--modal-animation-duration, 300ms) ease-out;
-  transition: transform var(--modal-animation-duration, 300ms) ease-out;
+.modal.showing .modal-dialog, .modal.show .modal-dialog {
+  opacity: 1;
+}
+.modal .modal-dialog {
+  transition-property: opacity visibility transform;
+  transition-duration: var(--modal-animation-duration, 300ms);
+  transition-timing-function: ease-out;
+  transform: translate(0, -50px);
+}
+
+.modal-backdrop.fade {
+  transition-property: opacity;
+  transition-duration: var(--modal-animation-duration, 300ms);
+  transition-timing-function: linear;
 }
 
 .offcanvas-footer {

Source/Blazorise.Bulma/BulmaClassProvider.cs

@@ -908,13 +908,7 @@ public override string Display( DisplayType displayType, DisplayDefinition displ
 
     public override string Modal() => "modal";
 
-    public override string ModalFade() => Fade();
-
-    public override string ModalFade( bool showing, bool hiding ) => showing
-        ? Show()
-        : hiding
-            ? Fade()
-            : null;
+    public override string ModalFade( bool showing, bool hiding ) => showing || hiding ? Fade() : null;
 
     public override string ModalVisible( bool visible ) => visible ? Active() : null;
 

Source/Blazorise.Bulma/BulmaStyleProvider.cs

@@ -11,7 +11,13 @@ public class BulmaStyleProvider : StyleProvider
 
     public override int DefaultModalBackdropZIndex => 0;
 
-    public override string ModalShow() => null;
+    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.FluentUI2/Providers/FluentUI2ClassProvider.cs

@@ -1015,8 +1015,6 @@ public override string Display( DisplayType displayType, DisplayDefinition displ
 
     public override string Modal() => "fui-DialogSurface";
 
-    public override string ModalFade() => "fui-DialogSurface-fade";
-
     public override string ModalFade( bool showing, bool hiding ) => showing || hiding ? "fui-DialogSurface-fade" : null;
 
     public override string ModalVisible( bool visible ) => visible ? "fui-DialogSurface-show" : "fui-DialogSurface-hide";

Source/Blazorise.FluentUI2/Providers/FluentUI2StyleProvider.cs

@@ -11,7 +11,13 @@ public class FluentUI2StyleProvider : StyleProvider
 
     public override int DefaultModalBackdropZIndex => 1050;
 
-    public override string ModalShow() => null;
+    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.Material/Styles/components/_modal.scss

@@ -24,14 +24,41 @@
         }
     }
 
+    display: block;
+    visibility: hidden;
+
+    &:not(.show) {
+        .modal-dialog {
+            opacity: 0;
+        }
+    }
+
+    &.showing,
+    &.show {
+        .modal-dialog {
+            opacity: 1;
+        }
+
+        visibility: visible;
+    }
+
+    .modal-dialog {
+        transition-property: opacity visibility transform;
+        transition-duration: var(--modal-animation-duration, 300ms);
+        transition-timing-function: cubic-bezier(0,0,.2,1);
+        transform: scale(.8)
+    }
+
     &.fade {
         transition: opacity var(--modal-animation-duration, 300ms) cubic-bezier(0,0,.2,1);
     }
 
     &.show {
         .modal-dialog {
-            transition: opacity,-webkit-transform var(--modal-animation-duration, 300ms) cubic-bezier(0,0,.2,1);
-            transition: opacity,transform var(--modal-animation-duration, 300ms) cubic-bezier(0,0,.2,1);
+            transition-property: opacity visibility transform;
+            transition-duration: var(--modal-animation-duration, 300ms);
+            transition-timing-function: cubic-bezier(0,0,.2,1);
+            transform: scale(1);
         }
     }
 
@@ -52,4 +79,4 @@
             max-width: $dialog-width-xl;
         }
     }
-}
+}