From 8c642303678714f47551aa8a74feab854fee7e7f Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 23 Jul 2021 03:15:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FromBottomDialog.vue | 43 +++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/FromBottomDialog.vue b/src/components/FromBottomDialog.vue
index eeff9ca..cd054b7 100644
--- a/src/components/FromBottomDialog.vue
+++ b/src/components/FromBottomDialog.vue
@@ -1,5 +1,14 @@
 <template>
-  <transition name="from-bottom">
+  <!--  <transition name="from-bottom"> -->
+  <transition
+      @before-enter="beforeEnter"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @leave="leave"
+      @after-leave="afterLeave"
+      :css="false"
+  >
     <div ref="dialog" class="FromBottomDialog"
          v-if="modelValue"
          :class="mode"
@@ -76,6 +85,27 @@ export default {
   created() {
   },
   methods: {
+    beforeEnter(el) {
+      this.$setCss(el, 'transition-duration', `200ms`)
+      this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
+    },
+    enter(el, done) {
+      setTimeout(() => {
+        this.$setCss(el, 'transform', `translate3d(0,0,0)`)
+      }, 0)
+      setTimeout(() => {
+        this.$setCss(el, 'transition-duration', `0ms`)
+        done()
+      }, 200)
+    },
+    beforeLeave(el) {
+      this.$setCss(el, 'transition-duration', `200ms`)
+      this.$setCss(el, 'transform', `translate3d(0,0,0)`)
+    },
+    leave(el, done) {
+      this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
+      setTimeout(done, 200)
+    },
     hide(val = false) {
       this.$emit('update:modelValue', val)
     },
@@ -110,7 +140,6 @@ export default {
         }, 300)
       }
     }
-
   }
 }
 </script>
@@ -118,16 +147,6 @@ export default {
 <style scoped lang="scss">
 @import "../assets/scss/index";
 
-.from-bottom-enter-active,
-.from-bottom-leave-active {
-  transition: transform 0.2s ease;
-}
-
-.from-bottom-enter-from,
-.from-bottom-leave-to {
-  transform: translate3d(0, 40vh, 0);
-}
-
 .FromBottomDialog {
   z-index: 9;
   position: fixed;