ホーム

転職ドラフト(次回10/20)

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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

Vue では配列にデータを追加すれば勝手に表示も増えてくれます。その配列が増えた時に Transition をかける方法について、まとめました。

目次

  1. Transition とは?
  2. さっそく実装してみます
  3. 実装の解説
  4. アレンジする

Transition とは とは?

Vue でアニメーションをつける時に便利なコンポーネントです。

簡単な実装についてはこちらで書いています。

Vue の Transition を使う方法を簡潔に書いてみる

さっそく実装してみます

全てのコードを載せます。

ボタンを押せば配列に要素が追加されます。

<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: "テキスト1",
          },
          {
            id: 2,
            text: "テキスト2",
          },
          {
            id: 3,
            text: "テキスト3",
          },
        ],
      };
    },
    methods: {
      addArray: function() {
        //今回はサンプルなので適当にオブジェクトを入れる関数を書いています
        this.array.push({
          id: 4,
          text: "テキスト4",
        });
      },
    },
  };
</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 などからご連絡いただければと思います。

それでは!