[bugfix] Toast: missing fade-out transition in multiple mode (#3504)

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={[

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();
+        });
       }
     }
   };

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);