Fixed dialog transitions (#2021)

Co-authored-by: hastom <[email protected]>
Co-authored-by: dragosct <[email protected]>

Author: 3 people

src/components/MdDialog/MdDialog.vue

@@ -162,32 +162,21 @@
     backface-visibility: hidden;
     pointer-events: auto;
     opacity: 1;
-    transform: scale(1);
+    transform: translate(-50%, -50%) scale(1);
     transform-origin: center center;
     transition: opacity $opacity-transition-duration $md-transition-stand-timing, transform $transform-transition-duration $md-transition-stand-timing;
     will-change: opacity, transform;
 
-    > .md-dialog-tabs,
-    > .md-dialog-title,
-    > .md-dialog-content,
-    > .md-dialog-actions {
-      transition: opacity .3s $md-transition-default-timing,
-                  transform .25s $md-transition-default-timing;
-      will-change: opacity, transform;
+    &.md-dialog-leave,
+    &.md-dialog-enter-to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
     }
-  }
 
-  .md-dialog-enter-active,
-  .md-dialog-leave-active {
-    opacity: 0;
-    transform: scale(.9);
-
-    > .md-dialog-tabs,
-    > .md-dialog-title,
-    > .md-dialog-content,
-    > .md-dialog-actions {
+    &.md-dialog-enter,
+    &.md-dialog-leave-to {
       opacity: 0;
-      transform: scale(.95) translate3D(0, 10%, 0);
+      transform: translate(-50%, -50%) scale(.9);
     }
   }
 
@@ -215,6 +204,18 @@
       max-height: 100%;
       border-radius: 0;
       transform: none;
+
+      &.md-dialog-enter,
+      &.md-dialog-leave-to {
+        opacity: 0;
+        transform: translate3D(0, 30%, 0);
+      }
+
+      &.md-dialog-leave,
+      &.md-dialog-enter-to {
+        opacity: 1;
+        transform: translate3D(0, 0, 0);
+      }
     }
   }
 </style>