我正在使用 vue.js 在我的网页中创建一种通知系统 一切正常,但我想在转换完成后删除该元素。 我只让它与 setTimeout 一起工作,但这不是理想的方法
工作 jsfiddle: http://jsfiddle.net/yMv7y/1073/
这是我的代码:
View :
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-包装器 { 位置:固定; z-指数: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;
}
}
最佳答案
问题:您试图在转换期间删除 el
(离开函数
),因此在没有 setTimeout 的情况下出现错误。
解决方案:您必须使用afterLeave 函数
。将 leave 函数
更改为 afterLeave 函数
。
afterLeave: function(el) {
el.remove();
}
关于javascript - vue.js 在过渡后删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33187612/