过渡后vue.js删除元素答案

【问题标题】：vue.js remove element after transition过渡后vue.js删除元素
【发布时间】：2016-01-16 05:13:49
【问题描述】：

我正在使用 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 包装器 { 位置：固定； 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;
}
}

【问题讨论】：

要删除#notifications-wrapper吗？
不仅是通知本身，它将与 v-repeat 一起显示。我认为从数组中删除它就足够了。
您要删除el 对象吗？
是的，这行得通。但这不是最好的为什么用 setTimeout 来做。动画完成时。

标签： javascript css removechild vue.js

【解决方案1】：

问题：您尝试在转换期间删除 el(leave function)，因此在没有 setTimeout 的情况下出现错误。

解决方案：您必须使用afterLeave function。将leave function 更改为afterLeave function。

afterLeave: function(el) {

        el.remove();
}

Jsfiddle

【讨论】：

永远不会调用 afterLeave 函数。元素 (el) 仍然存在于 dom 中，您可以使用 Web 开发人员工具查看它。它只是隐藏，因为动画会这样做。