From 7087922d18b2ac54629a6d886ce33630015d6097 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 6 Jul 2020 15:06:05 +0800
Subject: [PATCH] fix(Popup): animation

---
 src-next/popup/demo/index.vue | 12 ++++----
 src-next/popup/index.js       | 52 +++++++++++++++++------------------
 src-next/popup/index.less     |  8 +++---
 3 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src-next/popup/demo/index.vue b/src-next/popup/demo/index.vue
index a85d5c7be..c3260d820 100644
--- a/src-next/popup/demo/index.vue
+++ b/src-next/popup/demo/index.vue
@@ -13,7 +13,11 @@
       <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
       <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
 
-      <van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
+      <van-popup
+        v-model:show="showTop"
+        position="top"
+        :style="{ height: '30%' }"
+      />
       <van-popup
         v-model:show="showBottom"
         position="bottom"
@@ -140,12 +144,6 @@ export default {
       showCustomIconPosition: false,
     };
   },
-
-  watch: {
-    showBasic(val) {
-      console.log('showBasic', val);
-    }
-  }
 };
 </script>
 
diff --git a/src-next/popup/index.js b/src-next/popup/index.js
index 0c4720d32..23b900006 100644
--- a/src-next/popup/index.js
+++ b/src-next/popup/index.js
@@ -49,10 +49,6 @@ export default createComponent({
   },
 
   render() {
-    if (!this.shouldRender) {
-      return;
-    }
-
     const { round, position, duration } = this;
     const isCenter = position === 'center';
 
@@ -76,29 +72,31 @@ export default createComponent({
           onAfterEnter={this.onOpened}
           onAfterLeave={this.onClosed}
         >
-          <div
-            vShow={this.show}
-            ref="root"
-            style={style}
-            class={bem({
-              round,
-              [position]: position,
-              'safe-area-inset-bottom': this.safeAreaInsetBottom,
-            })}
-            onClick={this.onClick}
-            {...this.$attrs}
-          >
-            {this.$slots.default?.()}
-            {this.closeable && (
-              <Icon
-                role="button"
-                tabindex="0"
-                name={this.closeIcon}
-                class={bem('close-icon', this.closeIconPosition)}
-                onClick={this.close}
-              />
-            )}
-          </div>
+          {this.shouldRender ? (
+            <div
+              vShow={this.show}
+              ref="root"
+              style={style}
+              class={bem({
+                round,
+                [position]: position,
+                'safe-area-inset-bottom': this.safeAreaInsetBottom,
+              })}
+              onClick={this.onClick}
+              {...this.$attrs}
+            >
+              {this.$slots.default?.()}
+              {this.closeable && (
+                <Icon
+                  role="button"
+                  tabindex="0"
+                  name={this.closeIcon}
+                  class={bem('close-icon', this.closeIconPosition)}
+                  onClick={this.close}
+                />
+              )}
+            </div>
+          ) : null}
         </Transition>
       </>
     );
diff --git a/src-next/popup/index.less b/src-next/popup/index.less
index 9a9234ab7..88eec745b 100644
--- a/src-next/popup/index.less
+++ b/src-next/popup/index.less
@@ -82,22 +82,22 @@
       transition-timing-function: ease-in;
     }
 
-    &-slide-top-enter,
+    &-slide-top-enter-from,
     &-slide-top-leave-active {
       transform: translate3d(0, -100%, 0);
     }
 
-    &-slide-right-enter,
+    &-slide-right-enter-from,
     &-slide-right-leave-active {
       transform: translate3d(100%, -50%, 0);
     }
 
-    &-slide-bottom-enter,
+    &-slide-bottom-enter-from,
     &-slide-bottom-leave-active {
       transform: translate3d(0, 100%, 0);
     }
 
-    &-slide-left-enter,
+    &-slide-left-enter-from,
     &-slide-left-leave-active {
       transform: translate3d(-100%, -50%, 0);
     }