From 7dbb5db2569bd0c8c8a9d0810f93a2280250a356 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 11 Dec 2017 20:00:26 +0800
Subject: [PATCH] [Improvement] uniform fade animation (#410)

---
 packages/mixins/popup/Modal.vue            | 18 +++++++++++-------
 packages/mixins/popup/popup-manager.js     |  5 +++--
 packages/popup/index.vue                   |  2 +-
 packages/toast/toast.vue                   |  2 +-
 packages/vant-css/src/common/animation.css | 19 +++++++++++++++++++
 packages/vant-css/src/popup.css            |  5 -----
 packages/vant-css/src/toast.css            |  8 --------
 test/unit/specs/toast.spec.js              |  2 +-
 8 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/mixins/popup/Modal.vue b/packages/mixins/popup/Modal.vue
index ad0092866..e76440d8f 100644
--- a/packages/mixins/popup/Modal.vue
+++ b/packages/mixins/popup/Modal.vue
@@ -1,11 +1,14 @@
 <template>
-  <div
-    class="van-modal"
-    :class="className"
-    :style="style"
-    @touchmove.prevent.stop
-    @click="$emit('click', $event)"
-  />
+  <transition name="van-fade">
+    <div
+      v-show="visible"
+      class="van-modal"
+      :class="className"
+      :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
diff --git a/packages/mixins/popup/popup-manager.js b/packages/mixins/popup/popup-manager.js
index fc632526e..1113c5224 100644
--- a/packages/mixins/popup/popup-manager.js
+++ b/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
       });
     }
   }
diff --git a/packages/popup/index.vue b/packages/popup/index.vue
index 754570f71..d08dcb969 100644
--- a/packages/popup/index.vue
+++ b/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
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index e07e40f84..07919a098 100644
--- a/packages/toast/toast.vue
+++ b/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 -->
diff --git a/packages/vant-css/src/common/animation.css b/packages/vant-css/src/common/animation.css
index da7cdfd03..f100d1413 100644
--- a/packages/vant-css/src/common/animation.css
+++ b/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;
diff --git a/packages/vant-css/src/popup.css b/packages/vant-css/src/popup.css
index dd21a546d..20488663d 100644
--- a/packages/vant-css/src/popup.css
+++ b/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;
-}
diff --git a/packages/vant-css/src/toast.css b/packages/vant-css/src/toast.css
index 56e5fa785..e39dc8bb3 100644
--- a/packages/vant-css/src/toast.css
+++ b/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;
-}
diff --git a/test/unit/specs/toast.spec.js b/test/unit/specs/toast.spec.js
index e5b412978..2a7ab076b 100644
--- a/test/unit/specs/toast.spec.js
+++ b/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) => {