vue.js удалить элемент после перехода

Question

Я создаю своего рода систему уведомлений на моей веб-странице с помощью vue.js Все работает нормально, но я хочу удалить элемент после завершения перехода. я только получить эту работу с SetTimeout, но это не идеальный метод

Рабочая jsfiddle: http://jsfiddle.net/yMv7y/1073/

Это мой код:

Вю:

Vue.transition('notification', { 
    enter: function(el) { 
     app.notifications.pop(); 
    }, 
    leave: function(el) { 
     setTimeout(function(){ 
      el.remove(); 
     },5000); 
    }, 
}); 

Vue.component('notification', { 
    template: '<div class="notification" v-class="red: !success, green: success" v-transition="notification"><p>{{message}}</p></div>', 
    data: function() { 
     return { 
      success: true, 
      message: '', 
     }; 
    }, 
}); 

var app = new Vue({ 
    el: 'body', 
    data: { 
     notifications : [ 
     ] 
    }, 
    ready: function() { 
     self = this; 
     var data = { 
      'message': 'Thank you', 
      'success': true 
     }; 
     self.notifications.push(data); 
    }, 
}); 

Html:

<div id="notifications-wrapper"> 
    <notification id="notification" 
      v-repeat="notifications" 
      > 
    </notification> 
</div> 

CSS # уведомление-обертка { позиция: фиксированная; z-index: 99; верх: 0; слева: 80%;

overflow: visible; 
} 

.notification 
{ 
position: relative; 
z-index: 100; 

overflow: hidden; 

width: 250px; 
margin-top: 20px; 
transform: translate(20px, 0); 
animation-fill-mode: forwards; 
transition: 1s; 
-webkit-backdrop-filter: blur(2px); 
     backdrop-filter: blur(2px); 
background-color: grey; 
} 

p 
{ 
margin: 10px 20px; 

color: $white; 
} 



.notification-transition 
{ 
animation-delay: 0s, 4.5s; 
animation-duration: 4.5s, 0.5s; 
animation-name: slide-in-out, hide-notification; 
} 


@keyframes slide-in-out 
{ 
0% 
{ 
    transform: translate(20px, 0); 
} 
10% 
{ 
    transform: translate(-270px, 0); 
} 
90% 
{ 
    transform: translate(-270px, 0); 
    opacity: 1; 
} 
100% 
{ 
    transform: translate(20px, 0); 
    opacity: .5; 
} 
} 

@keyframes hide-notification { 
1% { 
    height: auto; 
    margin-top: 20px; 
} 
100% { 
    height: 0; 
    margin: 0; 
} 
} 

Answer 1

Проблема: Вы пытались удалить el во время перехода (leave function), так что вы получили ошибку без SetTimeout.

Решение: Вам необходимо использовать afterLeave function. Изменить leave function на afterLeave function.

afterLeave: function(el) { 

     el.remove(); 
} 

Jsfiddle