<div id="app">
  <transition-group>
    <div v-for="(item,index) of list" :key="item.id">
      {{item.title}}
    </div>
  </transition-group>
  <!-- 
      <transition>
        <div>hello world</div>
      </transition>
      <transition>
        <div>hello world</div>
      </transition>
      <transition>
        <div>hello world</div>
      </transition> 
    -->
  <button @click="handleBtnClick">Add</button>
</div>
.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
  color: #48b785;
}
var count = 0;
var app = new Vue({
  el: "#app",
  data: {
    list: []
  },
  methods: {
    handleBtnClick: function () {
      this.list.push({
        id: count++,
        title: "hello world" + count
      });
    }
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js