VueJS中添加多个元素到列表时添加过渡动画

Question

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

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

关联的 css 代码

VueJS中添加多个元素到列表时添加过渡动画

Adding transition animation when adding multiple elements to the list in VueJS

vue.js

vuejs-transition-group

vue-transitions