vue.js - 在VueJS中向列表添加多个元素时添加过渡动画

Question

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

Answer 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