fix(dialog-box): fix dialog wrapper animation is not working (#3636)

Author: gausszhou

packages/theme-saas/src/dialog-box/index.less

@@ -155,8 +155,6 @@
   @apply top-0;
   @apply w-full;
   @apply h-full;
-  @apply opacity-30;
-  @apply bg-black;
 }
 
 .v-modal-enter {
@@ -231,24 +229,20 @@
 
 @keyframes dialog-fade-in {
   0% {
-    transform: translate3d(0, -20px, 0);
     @apply opacity-0;
   }
 
   100% {
-    transform: translate3d(0, 0, 0);
     @apply opacity-100;
   }
 }
 
 @keyframes dialog-fade-out {
   0% {
-    transform: translate3d(0, 0, 0);
     @apply opacity-100;
   }
 
   100% {
-    transform: translate3d(0, -20px, 0);
     @apply opacity-0;
   }
 }

packages/theme/src/dialog-box/index.less

@@ -35,6 +35,10 @@
     margin: 0;
     display: block;
     align-items: normal;
+
+    &.is-modal {
+      background: var(--tv-DialogBox-mask-bg-color);
+    }
   }
 
   &.is-fullscreen {
@@ -205,7 +209,6 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background: var(--tv-DialogBox-mask-bg-color);
 }
 
 .v-modal-enter {
@@ -283,24 +286,20 @@
 
 @keyframes dialog-fade-in {
   0% {
-    transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
 
   100% {
-    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 }
 
 @keyframes dialog-fade-out {
   0% {
-    transform: translate3d(0, 0, 0);
     opacity: 1;
   }
 
   100% {
-    transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
 }

packages/vue/src/dialog-box/src/pc.vue

@@ -18,7 +18,7 @@
   >
     <div
       v-show="visible"
-      :class="['tiny-dialog-box__wrapper', dialogClass]"
+      :class="['tiny-dialog-box__wrapper', dialogClass, { 'is-modal': modal }]"
       @click.self="handleWrapperClick"
       @mouseup="useMouseEventUp"
       @mousedown="useMouseEventDown"