From 13bfb39e9b8b0d3689051a78dd9924fd52dcc6a0 Mon Sep 17 00:00:00 2001
From: b1anker <narutowontstop@gmail.com>
Date: Thu, 3 Nov 2016 15:36:57 +0800
Subject: [PATCH] Message, Notification: fix transitionend bug
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题描述：
如果我在组件中加入不同的transition或者transition: all
duration的形式，那么this.$el.addEventListener(‘transitioned’,
handeler)就会监听到多次事件，从而导致多次删除，因为节点已经从dom中删除，
所以最后报错：
’main.vue?8f52:44
Uncaught TypeError: Cannot read property 'removeChild' of null’。
解决办法：
就是在第一次监听到动画结束事件时，将监听器移除即可。
---
 packages/message/src/main.vue      | 13 ++++++++-----
 packages/notification/src/main.vue | 13 ++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
index abbda4de1..8b0778189 100644
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@@ -35,15 +35,18 @@
       closed(newVal) {
         if (newVal) {
           this.visible = false;
-          this.$el.addEventListener('transitionend', () => {
-            this.$destroy(true);
-            this.$el.parentNode.removeChild(this.$el);
-          });
+          this.$el.addEventListener('transitionend', this.destroyElement);
         }
       }
     },
 
     methods: {
+      destroyElement() {
+        this.$el.removeEventListener('transitionend', this.destroyElement);
+        this.$destroy(true);
+        this.$el.parentNode.removeChild(this.$el);
+      },
+
       handleClose() {
         this.closed = true;
         if (typeof this.onClose === 'function') {
@@ -70,4 +73,4 @@
       this.startTimer();
     }
   };
-</script>
\ No newline at end of file
+</script>
diff --git a/packages/notification/src/main.vue b/packages/notification/src/main.vue
index d865920cb..8051af08a 100644
--- a/packages/notification/src/main.vue
+++ b/packages/notification/src/main.vue
@@ -44,15 +44,18 @@
       closed(newVal) {
         if (newVal) {
           this.visible = false;
-          this.$el.addEventListener('transitionend', () => {
-            this.$destroy(true);
-            this.$el.parentNode.removeChild(this.$el);
-          });
+          this.$el.addEventListener('transitionend', this.destroyElement);
         }
       }
     },
 
     methods: {
+      destroyElement() {
+        this.$el.removeEventListener('transitionend', this.destroyElement);
+        this.$destroy(true);
+        this.$el.parentNode.removeChild(this.$el);
+      },
+
       handleClose() {
         this.closed = true;
         if (typeof this.onClose === 'function') {
@@ -85,4 +88,4 @@
       }
     }
   };
-</script>
\ No newline at end of file
+</script>