はじめに

このページで作成できるのは以下のようなものです。

全体のコード

TestPage.vue

<template>
  <v-app>
      <v-main class="bg">
        <v-container>
          <v-row class="ma-8">
            <transition-group name="list">
              <v-col v-for="(item) in links" :key="item" class="list-item"
                :style="{ 'transition-delay': `${item.id * 0.3}s` }" cols="4">
                <v-card height="150" class="ma-8" >
                  <v-card-title class="text-center">{{ item.name }}</v-card-title>
                </v-card>
              </v-col>
            </transition-group>
          </v-row>
        </v-container>
      </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      links: [
      ],
    }
  },
  methods: {
    
  },
  mounted() {
    this.links = [
      { id: 1, name: "Page1" },
      { id: 2, name: "Page2" },
      { id: 3, name: "Page3" },
      { id: 4, name: "Page4" },
      { id: 5, name: "Page5" },
    ]
  }
};
</script>

<style scoped>


.bg {
  background-color: rgb(222, 212, 199);
}


.list-enter-active {
  transition: all 1s ease-out;
}


.list-enter-to {
  opacity: 1.0s;
  transform: translateY(0px);
}

.list-enter-from {
  opacity: 0;
  transform: translateY(300px);
}
</style>

やってること

カードを段組み表示
transition-groupによるスライドアニメーション

カードの段組み表示

vuetifyのv-colとv-rowを組み合わせて実装できます。
詳しく知りたい方はこちら
https://vuetifyjs.com/ja/components/grids/#v-spacer

transition-groupによるスライドアニメーション

Vueでは、transitionのためにenter/leaveクラスを使用することができます。

enter : 要素が追加されたとき（表示）
leave : 要素が削除されたとき（非表示）

今回使用しているのはenterクラスの

enter-from (初期状態)
enter-active (途中)
enter-to (終了)
の3つとなります。

これらは下の図でわかりやすく説明されています。

(https://v3.ja.vuejs.org/guide/transitions-enterleave.html)

trainsition-groupを使うとv-for内の要素全てにアニメーションを付けることが可能です。
今回は、各要素に時間差を付けてスライドさせるため、trainsition-delayを使ってindex番号を基にdelayをかけています。

参考