css - vuejs删除列表项时的动画问题

Question

我正在尝试删除带有一些动画的列表项，问题是如果删除的元素是最后一个，它工作正常，但如果我删除最后一个动画以外的某些元素，则无法正常工作，请参阅此处的 fiddle : 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，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>

您需要定义:key并且您应该避免索引并使用您的属性，例如item.ID。如果您使用它来删除元素，则会造成一些麻烦。

我调整了一些东西，你可以在这里查看:https://jsfiddle.net/49gptnad/1006/