fix(Popup): animation

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>
 

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>
       </>
     );

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);
     }