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,6 +72,7 @@ export default createComponent({
           onAfterEnter={this.onOpened}
           onAfterLeave={this.onClosed}
         >
+          {this.shouldRender ? (
             <div
               vShow={this.show}
               ref="root"
@@ -99,6 +96,7 @@ export default createComponent({
                 />
               )}
             </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);
     }