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

Author: gausszhou

examples/sites/src/App.vue

@@ -16,7 +16,6 @@ import { onMounted, provide, ref } from 'vue'
 import { TinyConfigProvider, TinyModal } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import { TinyRemoter } from '@opentiny/next-remoter'
-import '@opentiny/next-remoter/dist/style.css'
 import { useTinyRemoter, webMcpSessionId } from './composable/useTinyRemoter'
 
 import useTheme from './tools/useTheme'

examples/sites/src/main.js

@@ -1,5 +1,8 @@
 import { createHead } from '@vueuse/head'
 import { createApp } from 'vue'
+
+// 由于 @opentiny/next-remoter/dist/style.css 中包含了旧版的弹窗和动画样式，这里调整到最前，不确定是否会有其他影响，请评估
+import '@opentiny/next-remoter/dist/style.css'
 import '@unocss/reset/eric-meyer.css'
 
 // markdown文件内代码高亮

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

@@ -155,8 +155,7 @@
   @apply top-0;
   @apply w-full;
   @apply h-full;
-  @apply opacity-30;
-  @apply bg-black;
+  @apply bg-transparent;
 }
 
 .v-modal-enter {
@@ -231,24 +230,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,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background: var(--tv-DialogBox-mask-bg-color);
+  background: transparent;
 }
 
 .v-modal-enter {
@@ -283,24 +287,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"