<template>
  <div class="container">
    <button @click="addArray">増えるよ</button>
    <!-- v-forで配列が増える部分をtransition-groupタグで囲う -->
    <!-- listという名前のアニメーションを指定しています -->
    <transition-group name="list" tag="div">
      <div v-for="a in array" :key="a.id">
        <p>{{ a.id }}: {{ a.text }}</p>
      </div>
    </transition-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //初期値を入れているだけ
        array: [
          {
            id: 1,
            text: "テキスト１",
          },
          {
            id: 2,
            text: "テキスト2",
          },
          {
            id: 3,
            text: "テキスト3",
          },
        ],
      };
    },
    methods: {
      addArray: function() {
        //今回はサンプルなので適当にオブジェクトを入れる関数を書いています
        this.array.push({
          id: 4,
          text: "テキスト４",
        });
      },
    },
  };
</script>

<style scoped>
  .container {
    margin: 100px;
    width: 100%;
  }
  /* listという名前のアニメーションを用意しています。公式のやつのコピペです */
  .list-enter-active,
  .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
  }
</style>

<transition-group name="list" tag="div">
  <div v-for="a in array" :key="a.id">
    <p>{{ a.id }}: {{ a.text }}</p>
  </div>
</transition-group>

/* listという名前のアニメーションを用意しています。公式のやつのコピペです */
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}