From 0b33a113118e0e50358a1068a3fbe9225eec12e6 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 13 Jul 2022 13:40:09 +0800
Subject: [PATCH] fix(dialog): add dialog transition

---
 src/dialog/dialog.wxml   |  1 +
 src/mixins/transition.ts |  2 +-
 src/overlay/overlay.less |  2 +-
 src/popup/popup.less     | 13 +++++++++++--
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/dialog/dialog.wxml b/src/dialog/dialog.wxml
index 314433edf..92015e63b 100644
--- a/src/dialog/dialog.wxml
+++ b/src/dialog/dialog.wxml
@@ -2,6 +2,7 @@
 <wxs src="./dialog.wxs" module="_" />
 
 <t-popup
+  name="dialog"
   class="{{classPrefix}}__wrapper"
   visible="{{visible}}"
   showOverlay="{{showOverlay}}"
diff --git a/src/mixins/transition.ts b/src/mixins/transition.ts
index 2d562ddb4..a0000c3a3 100644
--- a/src/mixins/transition.ts
+++ b/src/mixins/transition.ts
@@ -91,7 +91,7 @@ export default function transition() {
         clearTimeout(this.transitionT);
         setTimeout(() => {
           this.setData({
-            transitionClass: [`${prefix}-${name}-leave-active ${prefix}-${name}-leave-to`],
+            transitionClass: `${prefix}-${name}-leave-active ${prefix}-${name}-leave-to`,
           });
         }, 30);
         if (typeof duration === 'number' && duration > 0) {
diff --git a/src/overlay/overlay.less b/src/overlay/overlay.less
index e4829a1e8..244306a1c 100644
--- a/src/overlay/overlay.less
+++ b/src/overlay/overlay.less
@@ -9,7 +9,7 @@
   width: 100%;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.6);
-  transition: opacity 200ms ease;
+  transition: opacity 300ms ease;
 }
 
 .t-fade-enter {
diff --git a/src/popup/popup.less b/src/popup/popup.less
index 0aec846e3..433afe046 100644
--- a/src/popup/popup.less
+++ b/src/popup/popup.less
@@ -8,7 +8,7 @@
   position: fixed;
   z-index: 11500;
   max-height: 100vh;
-  transition: transform 200ms ease;
+  transition: all 300ms ease;
 
   &__content {
     position: relative;
@@ -77,7 +77,16 @@
     }
 
     &.@{popup}--center {
-      transform: scale(0);
+      transform: scale(0.6) translate3d(-50%, -50%, 0);
+      opacity: 0;
+    }
+  }
+
+  &.@{prefix}-dialog-enter,
+  &.@{prefix}-dialog-leave-to {
+    &.@{popup}--center {
+      transform: scale(0.6) translate3d(-50%, -50%, 0);
+      opacity: 0;
     }
   }
 }