vuejs animation issue on removing item of list

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/