はじめに
このページで作成できるのは以下のようなものです。
全体のコード
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をかけています。