<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>

実装の解説

コメントアウトのとおりですが、v-for で配列が増える部分を transition-group タグで囲います。

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

transition-group には name を指定します

今回でいえば、name=“list”なので list という名前がついています。

transition-group には tag を指定します

今回でいえば、tag=“div”なので div タグが追加されています。

style にアニメーションする内容を書く

/* 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);
}

したからふわっと浮かび上がってくるように文字列が追加されたら OK です。

まとめ

以上、Vue で配列に追加されたときに Transition するををめっちゃ簡単に説明してみました。

誤字や分かりにくいところありましたら Twitter の DM などからご連絡いただければと思います。

それでは！

Vueで配列に追加する時に、表示をTransitionする方法

Transition とは とは？

さっそく実装してみます

実装の解説

コメントアウトのとおりですが、v-for で配列が増える部分を transition-group タグで囲います。

transition-group には name を指定します

transition-group には tag を指定します

style にアニメーションする内容を書く

まとめ

Transition とはとは？