2

我正在尝试删除带有一些动画的列表项，问题是如果删除的项目是最后一个它可以正常工作，但是如果我删除除最后一个动画之外的某些项目无法正常工作，请参见此处的小提琴：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);
  }
}
4

1 回答 1

3

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

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

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

于 2018-01-31T15:54:59.520 回答