vue.js remove element after transition

Question

I'm creating a sort of notification system inside my webpage with vue.js All works fine but i want to remove the element after the transition is completed. I only get this to work with an setTimeout but that is not the ideal method

Working jsfiddle: http://jsfiddle.net/yMv7y/1073/

This is my code:

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; left: 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;
}
}

No only the notification itself which will be showed with v-repeat. I thought that remove it from the array was enough. — andre de waard, Oct 17 '15 at 14:29
Yes, and this works. But it is not the best why to do it with a setTimeout. When the animation is completed. — andre de waard, Oct 17 '15 at 14:41

score 2 · Answer 1 · answered Oct 17 '15 at 14:45

2

Problem: You tried to remove el during the transition(leave function) so you got error without setTimeout.

Solution: You have to use afterLeave function. Change leave function to afterLeave function.

afterLeave: function(el) {

        el.remove();
}

Jsfiddle

answered Oct 17 '15 at 14:45

Alex

8,461
6
37
49

the afterLeave function will never be called. The element (el) still exist in the dom you can see it with the web developer tools. It only hides because the animation does that. – andre de waard Oct 17 '15 at 14:53

vue.js remove element after transition

1 Answers1