fix: fixed popup animation v-if bug

Author: chuanshuoye

src/popup/src/popup.vue

@@ -1,30 +1,3 @@
-<template lang="html">
-<transition v-if="currentVisible">
-  <div 
-    :class='{
-      [`${prefixCls}`]: true,
-      [`${prefixCls}--hidden`]: !maskVisible,
-    }'
-  >
-    <div :class='{
-        [`${prefixCls}__wrapper`]: true,
-        [`${prefixCls}__wrapper-${direction}`]: true,
-      }'
-      :style='transitionDurationStyle'
-    >   
-        <slot></slot>
-    </div>
-    <za-mask
-      v-if="hasMask"
-      :class='[`fade-${animationState}`]'
-      :style='animationDurationStyle'
-      :visible='maskVisible'
-      :type='maskType'
-      @click="onMaskClick"/>
-  </div>
-</transition>
-</template>
-
 <script>
 import zaMask from '../../mask';
 import getContainer from '../../mixins/get-container';
@@ -119,7 +92,7 @@ export default {
       this.animationState = 'enter';
       this.timerEnter = setTimeout(() => {
         this.maskVisible = true;
-      });
+      }, 10);
     },
     leave() {
       this.animationState = 'leave';
@@ -148,5 +121,45 @@ export default {
   beforeDestroy() {
     this.removeTimer();
   },
+  render() {
+    const {
+      prefixCls,
+      hasMask,
+      direction,
+      maskType,
+      onMaskClick,
+      maskVisible,
+      currentVisible,
+      animationState,
+      transitionDurationStyle,
+      animationDurationStyle,
+    } = this;
+    const popupCls = maskVisible ? `${prefixCls} ${prefixCls}--opened` : `${prefixCls}`;
+    return (
+      <transition>
+        {currentVisible ?
+          <div
+            class={`${popupCls}`}
+          >
+            <div class={`${prefixCls}__wrapper ${prefixCls}__wrapper-${direction}`}
+              style={transitionDurationStyle}
+            >
+              {this.$slots.default}
+            </div>
+            {
+              hasMask ?
+                <za-mask
+                  class={`fade-${animationState}`}
+                  style={animationDurationStyle}
+                  visible={maskVisible}
+                  type={maskType}
+                  onClick={onMaskClick} />
+                : null
+            }
+          </div> : null
+        }
+      </transition>
+    );
+  },
 };
 </script>

src/popup/style/component.scss

@@ -3,8 +3,6 @@
 
   @include e(wrapper) {
     position: fixed;
-    transform: translate(0, 0);
-    transition-property: transform;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     z-index: $zIndex-popup;
@@ -13,57 +11,67 @@
       left: 0;
       bottom: 0;
       width: 100%;
+      transform: translate(0, 100%);
     }
 
     &-top {
       left: 0;
       top: 0;
       width: 100%;
+      transform: translate(0, -100%);
     }
 
     &-left {
       left: 0;
       top: 0;
       height: 100%;
+      transform: translate(-100%, 0);
     }
 
     &-right {
       right: 0;
       top: 0;
       height: 100%;
+      transform: translate(100%, 0);
     }
 
     &-center {
+      display: none;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
     }
   }
 
-  @include m(hidden) {
+  @include m(opened) {
     @include e(wrapper) {
       &-bottom {
-        transform: translate(0, 100%);
+        transform: translate(0, 0);
+        transition-property: transform;
       }
 
       &-top {
-        transform: translate(0, -100%);
+        transform: translate(0, 0);
+        transition-property: transform;
       }
 
       &-left {
-        transform: translate(-100%, 0);
+        transform: translate(0, 0);
+        transition-property: transform;
       }
 
       &-right {
-        transform: translate(100%, 0);
+        transform: translate(0, 0);
+        transition-property: transform;
       }
 
       &-center {
-        display: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transform: translate(0, 0);
+        transition-property: transform;
       }
     }
   }