retire transitionend

packages/loading/src/directive.js

@@ -36,8 +36,7 @@ exports.install = Vue => {
       });
     } else {
       if (el.domVisible) {
-        const destroyElement = function() {
+        el.instance.$on('after-leave', _ => {
-          el.mask.removeEventListener('transitionend', destroyElement);
           el.domVisible = false;
           if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') {
             document.body.style.overflow = el.originalOverflow;
@@ -47,8 +46,7 @@ exports.install = Vue => {
           } else {
             el.style.position = el.originalPosition;
           }
-        };
+        });
-        el.mask.addEventListener('transitionend', destroyElement);
         el.instance.visible = false;
       }
     }

packages/loading/src/index.js

@@ -17,14 +17,6 @@ let fullscreenLoading;
 LoadingConstructor.prototype.originalPosition = '';
 LoadingConstructor.prototype.originalOverflow = '';
 
-const destroyElement = function() {
-  this.$el.removeEventListener('transitionend', destroyElement);
-  this.$el &&
-  this.$el.parentNode &&
-  this.$el.parentNode.removeChild(this.$el);
-  this.$destroy();
-};
-
 LoadingConstructor.prototype.close = function() {
   if (this.fullscreen && this.originalOverflow !== 'hidden') {
     document.body.style.overflow = this.originalOverflow;
@@ -37,7 +29,12 @@ LoadingConstructor.prototype.close = function() {
   if (this.fullscreen) {
     fullscreenLoading = undefined;
   }
-  this.$el.addEventListener('transitionend', destroyElement.bind(this));
+  this.$on('after-leave', _ => {
+    this.$el &&
+    this.$el.parentNode &&
+    this.$el.parentNode.removeChild(this.$el);
+    this.$destroy();
+  });
   this.visible = false;
 };
 

packages/loading/src/loading.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="el-loading-fade">
+  <transition name="el-loading-fade" @after-leave="handleAfterLeave">
     <div
       v-show="visible"
       class="el-loading-mask"
@@ -23,6 +23,12 @@
         visible: false,
         customClass: ''
       };
+    },
+
+    methods: {
+      handleAfterLeave() {
+        this.$emit('after-leave');
+      }
     }
   };
 </script>