From 0ea1c6f64443f99c3b7c4e9df72d5bb8e6a24589 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 14 Jun 2019 11:51:08 +0800
Subject: [PATCH] [bugfix] Toast: missing fade-out transition in multiple mode
 (#3504)

---
 packages/toast/Toast.js           | 10 +++++++++-
 packages/toast/index.js           | 16 +++++++++-------
 packages/toast/test/index.spec.js | 17 ++++++++++++++++-
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/toast/Toast.js b/packages/toast/Toast.js
index dec203599..9557e3b0c 100644
--- a/packages/toast/Toast.js
+++ b/packages/toast/Toast.js
@@ -69,6 +69,10 @@ export default sfc({
       if (this.onOpened) {
         this.onOpened();
       }
+    },
+
+    onAfterLeave() {
+      this.$emit('closed');
     }
   },
 
@@ -100,7 +104,11 @@ export default sfc({
     }
 
     return (
-      <transition name="van-fade" onAfterEnter={this.onAfterEnter}>
+      <transition
+        name="van-fade"
+        onAfterEnter={this.onAfterEnter}
+        onAfterLeave={this.onAfterLeave}
+      >
         <div
           vShow={this.value}
           class={[
diff --git a/packages/toast/index.js b/packages/toast/index.js
index e301c6875..406852439 100644
--- a/packages/toast/index.js
+++ b/packages/toast/index.js
@@ -74,15 +74,17 @@ function Toast(options = {}) {
       }
 
       if (multiple && !isServer) {
-        clearTimeout(toast.timer);
-        queue = queue.filter(item => item !== toast);
+        toast.$on('closed', () => {
+          clearTimeout(toast.timer);
+          queue = queue.filter(item => item !== toast);
 
-        const parent = toast.$el.parentNode;
-        if (parent) {
-          parent.removeChild(toast.$el);
-        }
+          const parent = toast.$el.parentNode;
+          if (parent) {
+            parent.removeChild(toast.$el);
+          }
 
-        toast.$destroy();
+          toast.$destroy();
+        });
       }
     }
   };
diff --git a/packages/toast/test/index.spec.js b/packages/toast/test/index.spec.js
index 7e92d8941..ebe98268d 100644
--- a/packages/toast/test/index.spec.js
+++ b/packages/toast/test/index.spec.js
@@ -75,7 +75,7 @@ test('clear toast', () => {
   Toast.allowMultiple(false);
 });
 
-test('multiple toast', () => {
+test('clear multiple toast', () => {
   Toast.allowMultiple();
   Toast.clear(true);
   const toast1 = Toast.success('1');
@@ -89,6 +89,21 @@ test('multiple toast', () => {
   Toast.allowMultiple(false);
 });
 
+test('remove toast DOM when cleared in multiple mode', async () => {
+  Toast.allowMultiple();
+  Toast.clear(true);
+  const toast = Toast({ message: '1' });
+  await later();
+
+  // mock onAfterLeave
+  toast.clear();
+  toast.onAfterLeave();
+  await later();
+
+  expect(toast.$el.parentNode).toEqual(null);
+  Toast.allowMultiple(false);
+});
+
 test('set default options', () => {
   Toast.setDefaultOptions({ duration: 1000 });
   expect(Toast().duration).toEqual(1000);