vuejs animation issue on removing item of list - css

Question

I am trying to remove a list item with some animation, issue is if the removed item is the last one it works fine, but if I remove some item other than the last one animation is not working properly, see the fiddle here: https://jsfiddle.net/49gptnad/1003/
js code:
Vue.component('hello', {
template: '<transition name="bounce"><li>{{ind}} <a #click="removeit(ind)">remove</a></li></transition>',
props: ['ind'],
methods: {
removeit(ind) {
this.$emit('removeit')
}
}
})
var vm = new Vue({
el: '#vue-instance',
data: {
list: [1,2,3,4,5,6,7,8,9,10]
},
methods: {
removeit (extra, index) {
this.list.splice(index, 1)
}
}
});
html
<div id="vue-instance">
<ul>
<hello v-for="(item,index) in list" :ind="item" #removeit="removeit('extra', index)"></hello>
</ul>
</div>
css
.bounce-enter-active {
animation: bounce-in .7s;
}
.bounce-leave-active {
animation: bounce-in .7s reverse;
}
#keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.20);
}
100% {
transform: scale(1);
}
}

Answer 1

Ok, in the first place you should use transition-group, read more.
<div id="vue-instance">
<ul>
<transition-group name="bounce" tag="p">
<hello v-for="item in list"
:key="item" // You should use your property, (item.ID)
:ind="item"
#removeit="removeit('extra', item-1)">
</hello>
</transition-group>
</ul>
</div>
You need to define :key and you should avoid index and use your property, for example item.ID. It causes some trouble if you use it for removing item.
I have adjusted few things, you can check it here: https://jsfiddle.net/49gptnad/1006/