在VueJS中向列表中添加多个元素时添加过渡动画答案

【问题标题】：Adding transition animation when adding multiple elements to the list in VueJS在VueJS中向列表中添加多个元素时添加过渡动画
【发布时间】：2019-11-03 08:31:18
【问题描述】：

所以，看看这个fiddle。在将新的多个元素添加到呈现的列表时，我想从 vue 功能添加过渡动画。我已经尝试使用属性tag="div" 添加transition-group。但是，元素仍然没有添加动画。有什么建议吗？

【问题讨论】：

标签： vue.js vue-transitions vuejs-transition-group

【解决方案1】：

new Vue({
  el: '#app',
  data: {
    items: [{
        id: 1,
        name: 'John'
      },
      {
        id: 2,
        name: 'Doe'
      }
    ]
  },
  methods: {
    add: function() {
      let offset = this.items[this.items.length - 1].id
      this.items.push({
        id: offset + 1,
        name: 'Jane'
      }, {
        id: offset + 2,
        name: 'Dane'
      })
    }
  },
  components: {
    customComp: {
      props: ['name', 'id'],
      template: '<p>Hi {{name}} + {{id}}</p>'
    }
  }
})

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

{
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <button @click="add">Add</button>
  <transition-group name="fade">
    <custom-comp v-for="item in items" :key="item.id" :id="item.id" :name="item.name">
    </custom-comp>
  </transition-group>
</div>

您缺少与 fade 关联的 css 代码

【讨论】：