vue.js轉換後刪除元素

Question

我在我的網頁內創建了一種通知系統vue.js 所有工作正常，但我想在轉換完成後刪除元素。 我只得到這與setTimeout的工作，但這並不是理想的方法

工作的jsfiddle： http://jsfiddle.net/yMv7y/1073/

這是我的代碼：

VUE：

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 ＃notifications-wrapper { position：fixed; z-index：99; top：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

問題：您試圖轉型（leave function）中刪除el所以你不用setTimeout的遇到錯誤。

解決方案：您必須使用afterLeave function。將leave function更改爲afterLeave function。

afterLeave: function(el) { 

     el.remove(); 
} 

Jsfiddle