refactor: update dialog zoom transition

tapdata · Jan 9, 2024 · 1e0853d · 1e0853d
1 parent 316fb83
commit 1e0853d
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 116 deletions.
diff --git a/apps/daas/src/styles/app.scss b/apps/daas/src/styles/app.scss
@@ -189,3 +189,60 @@
   background-color: map-get($bgColor, white);
   border: 1px solid #2c65ff;
 }
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+// 遮罩层动画
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+// 遮罩层动画
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.dialog-zoom-transition {
+  &.dialog-fade-enter-active {
+    animation: fade-in 0.3s;
+    .el-dialog {
+      animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
+    }
+  }
+
+  &.dialog-fade-leave-active {
+    animation: fade-out 0.3s;
+    .el-dialog {
+      animation: dialog-close 0.35s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    }
+  }
+}
diff --git a/apps/dfs/src/assets/styles/app.scss b/apps/dfs/src/assets/styles/app.scss
@@ -222,3 +222,60 @@ $x3: $dotLeft + $dotSpace;
   width: auto;
   max-width: 357px;
 }
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+// 遮罩层动画
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+// 遮罩层动画
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.dialog-zoom-transition {
+  &.dialog-fade-enter-active {
+    animation: fade-in 0.3s;
+    .el-dialog {
+      animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
+    }
+  }
+
+  &.dialog-fade-leave-active {
+    animation: fade-out 0.3s;
+    .el-dialog {
+      animation: dialog-close 0.35s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    }
+  }
+}
diff --git a/apps/dfs/src/components/guide/index.vue b/apps/dfs/src/components/guide/index.vue
@@ -11,7 +11,7 @@
     </div>
     <ElDialog
       ref="dialogWrapper"
-      class="guide-dialog"
+      class="guide-dialog dialog-zoom-transition"
       :visible="visible"
       :top="'10vh'"
       width="1000px"
@@ -675,63 +675,6 @@ export default {
 </style>
 
 <style>
-@keyframes dialog-open {
-  0% {
-    opacity: 0;
-    transform: scale(0.2);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dialog-close {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-// 遮罩层动画
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-// 遮罩层动画
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.guide-dialog {
-  &.dialog-fade-enter-active {
-    animation: fade-in 0.3s;
-    .el-dialog {
-      animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
-    }
-  }
-
-  &.dialog-fade-leave-active {
-    animation: fade-out 0.3s;
-    .el-dialog {
-      animation: dialog-close 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-    }
-  }
-}
-
 @keyframes guideIconZoomIn {
   from {
     opacity: 0;

diff --git a/packages/business/src/components/create-connection/SceneDialog.vue b/packages/business/src/components/create-connection/SceneDialog.vue
@@ -692,61 +692,3 @@ export default {
   height: 640px;
 }
 </style>
-<style>
-@keyframes dialog-open {
-  0% {
-    opacity: 0;
-    transform: scale(0.2);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dialog-close {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-// 遮罩层动画
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-// 遮罩层动画
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.dialog-zoom-transition {
-  &.dialog-fade-enter-active {
-    animation: fade-in 0.3s;
-    .el-dialog {
-      animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
-    }
-  }
-
-  &.dialog-fade-leave-active {
-    animation: fade-out 0.3s;
-    .el-dialog {
-      animation: dialog-close 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-    }
-  }
-}
-</style>