[Improvement] uniform fade animation (#410)

packages/mixins/popup/Modal.vue

@@ -1,11 +1,14 @@
 <template>
-  <div
+  <transition name="van-fade">
-    class="van-modal"
+    <div
-    :class="className"
+      v-show="visible"
-    :style="style"
+      class="van-modal"
-    @touchmove.prevent.stop
+      :class="className"
-    @click="$emit('click', $event)"
+      :style="style"
-  />
+      @touchmove.prevent.stop
+      @click="$emit('click', $event)"
+    />
+  </transition>
 </template>
 
 <script>
@@ -13,6 +16,7 @@ export default {
   name: 'van-modal',
 
   props: {
+    visible: Boolean,
     zIndex: Number,
     className: String,
     customStyle: Object

packages/mixins/popup/popup-manager.js

@@ -66,7 +66,7 @@ const PopupManager = {
     const el = modal.$el;
 
     if (el.parentNode) {
-      el.parentNode.removeChild(el);
+      modal.visible = false;
     }
 
     if (context.top) {
@@ -75,7 +75,8 @@ const PopupManager = {
       targetNode.appendChild(el);
       Object.assign(modal, {
         ...modalDefaultConfig,
-        ...config
+        ...config,
+        visible: true
       });
     }
   }

packages/popup/index.vue

@@ -32,7 +32,7 @@ export default {
   },
 
   data() {
-    const transition = this.transition || (this.position === '' ? 'popup-fade' : `popup-slide-${this.position}`);
+    const transition = this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
     return {
       currentValue: false,
       currentTransition: transition

packages/toast/toast.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="van-toast-fade">
+  <transition name="van-fade">
     <div class="van-toast-wrapper" v-show="visible">
       <div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]">
         <!-- text only -->

packages/vant-css/src/common/animation.css

@@ -19,6 +19,25 @@
   }
 }
 
+@keyframes van-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.van-fade {
+  &-enter-active {
+    animation: .3s van-fade-in;
+  }
+
+  &-leave-active {
+    animation: .3s van-fade-out;
+  }
+}
+
 .van-slide-bottom {
   &-enter-active {
     animation: van-slide-bottom-enter .3s both ease;

packages/vant-css/src/popup.css

@@ -8,7 +8,6 @@
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.7);
-    animation: van-fade-in .3s both;
   }
 
   &-overflow-hidden {
@@ -77,7 +76,3 @@
 .popup-slide-left-enter, .popup-slide-left-leave-active {
   transform: translate3d(-100%, -50%, 0);
 }
-
-.popup-fade-enter, .popup-fade-leave-active {
-  opacity: 0;
-}

packages/vant-css/src/toast.css

@@ -17,10 +17,6 @@
   transform: translate3d(-50%, -50%, 0);
   background-color: rgba(39, 39, 39, .7);
 
-  &-wrapper {
-    transition: opacity .2s;
-  }
-
   &__overlay {
     position: fixed;
     top: 0;
@@ -68,7 +64,3 @@
     bottom: 50px;
   }
 }
-
-.van-toast-fade-enter, .van-toast-fade-leave-to {
-  opacity: 0;
-}

test/unit/specs/toast.spec.js

@@ -97,7 +97,7 @@ describe('Toast', () => {
     setTimeout(() => {
       expect(document.querySelector('.van-toast-wrapper').style.display === 'none').to.be.true;
       done();
-    }, 300);
+    }, 500);
   });
 
   it('toast duration 0', (done) => {