Question

我正在尝试删除带有动画的列表项，问题是如果删除的项目是最后一个它工作正常，但如果我删除一些项目而不是最后一个动画不能正常工作，请在此处查看小提琴：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

好的，首先你应该使用过渡组，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/

关于删除列表项的vuejs动画问题

1 个答案: