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
– andre de waard, Commented Oct 17, 2015 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
– andre de waard, Commented Oct 17, 2015 at 14:41

Alex · Accepted Answer · 2015-10-17 14:45:58Z

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, 2015 at 14:45

Alex

8,6956 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andre de waard Over a year ago

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.

Collectives™ on Stack Overflow

vue.js remove element after transition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related