CODEWITHSUNDEEP
vue.jscss-transitionscss-animationsvuejs2
ierdna
ierdna

Reputation: 6293

Elements in Vue.JS transition-group are not animating properly on-leave

I'm trying to implement android's toast-style component with animation in Vue.js 2. I have the following css for transitions:

.toast-enter-active {
    opacity: 0;
    transition: all 1s ease-out;
}
.toast-enter-to {
    opacity: 1;
}
.toast-leave {
    opacity: 1;
transition: all .7s ease-out;
}
.toast-leave-to {
    opacity: 0;
}

The toast-enter transitions look good - the list shifts up and the element fades in, but when an element is removed, for some reason the element to be removed jumps to the bottom and then fades out.

Here is what it looks like: jsFiddle

Upvotes: 4

Views: 2611

Answers (1)

ierdna
ierdna

Reputation: 6293

I figured out the problem. The v-for is simply recycling elements since it's using index as key. I solved it by adding an ID field to each toast and using this as key:

Template markup:

        <div 
            v-for="(toast, index) in toasts"
            :key="toast.id"
            :class = "['toast',toast.type]"
        >

Toasts themselves:

        {text:'1 test',type:'info', id:1},
        {text:'2 test',type:'info', id:2},
        {text:'3 test',type:'info', id:3},

Updated jsFiddle

Upvotes: 3

Related Questions