fix(dialog-box): dialog pop-up mask layer animation is not working (#3636)

Author: gausszhou

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

@@ -205,7 +205,6 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background: var(--tv-DialogBox-mask-bg-color);
 }
 
 .v-modal-enter {
@@ -230,10 +229,16 @@
 
 .dialog-slideRight-enter-active {
   animation: slideRight 0.5s ease-in forwards;
+  &.tiny-dialog-box__wrapper {
+    animation: modal-fade-in 0.5s;
+  }
 }
 
 .dialog-slideRight-leave-active {
   animation: slideRightout 0.5s ease-in forwards;
+  &.tiny-dialog-box__wrapper {
+    animation: modal-fade-out 0.5s;
+  }
 }
 
 @keyframes slideRight {
@@ -270,15 +275,43 @@
   }
 }
 
+.tiny-dialog-box__wrapper.has-modal {
+  background: var(--tv-DialogBox-mask-bg-color);
+}
+
 .dialog-fade-enter-active {
   animation: dialog-fade-in 0.3s;
+  &.tiny-dialog-box__wrapper {
+    animation: modal-fade-in 0.3s;
+  }
 }
 
 .dialog-fade-leave-active {
   .@{dialog-box-prefix-cls} {
     animation: dialog-fade-out 3s;
   }
   animation: dialog-fade-out 0.3s;
+  &.tiny-dialog-box__wrapper {
+    animation: modal-fade-out 0.3s;
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes dialog-fade-in {
@@ -306,7 +339,17 @@
 }
 
 .enlarge-enter-active {
-  animation: enlarge-in 350ms linear;
+  animation: enlarge-in 0.35s linear;
+  &.tiny-dialog-box__wrapper {
+    animation: modal-fade-in 0.35s;
+  }
+}
+
+.enlarge-leave-active {
+  animation: enlarge-out 0.35s linear;
+  &.tiny-dialog-box__wrapper {
+    animation: modal-fade-out 0.35s;
+  }
 }
 
 @keyframes enlarge-in {
@@ -323,6 +366,20 @@
   }
 }
 
+@keyframes enlarge-out {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.5);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
 @media (max-width: 480px) {
   .@{dialog-box-prefix-cls} {
     width: 100% !important;

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, modal ? 'has-modal' : '']"
       @click.self="handleWrapperClick"
       @mouseup="useMouseEventUp"
       @mousedown="useMouseEventDown"