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

Question

So, take a look on this fiddle. I want to add transition animation from vue feature when adding new multiple element to the list rendered. I already tried to add transition-group with the attribute tag="div". However, the elements still added without animation. Any suggestion?

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>

You're missing the css code associated with fade