Elements in a Vue.JS transition group do not expect properly

Question

I am trying to implement an Android component in the style of toasts 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 transitions toast-enterlook good - the list moves and the item disappears, but when the item is deleted, for some reason, the item being deleted jumps to the bottom and then disappears.

Here's what it looks like: jsFiddle

Answer 1

. V-for - , . , toast :

:

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

:

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

jsFiddle