vuejs проблема с анимацией при удалении элемента из списка

Question

Я пытаюсь удалить элемент списка с некоторой анимацией, проблема в том, что удаленный элемент является последним, который работает нормально, но если я удаляю какой-либо элемент, кроме последней, анимация не работает должным образом, см. Здесь: https://jsfiddle.net/49gptnad/1003/

JS код:

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

Хорошо, в первую очередь вы должны использовать transition-group, подробнее.

<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>

Вам нужно определить : ключ и вам следует избегать индексации и использовать ваше свойство, например item.ID. Это вызывает некоторые проблемы, если вы используете его для удаления элемента.

Я настроил несколько вещей, вы можете проверить это здесь: https://jsfiddle.net/49gptnad/1006/