はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はtransition-groupを用いてv-for等の複数のタグが作成される場面でトランジションを実装していきたいと思います。
transition-group
transition-groupはv-for属性等を用いて複数のタグが作られる際にそれらに対してまとめてトランジションを適用したい場合に付けます。
例えば以下の場合、transitionタグで囲っても正常にトランジションは動作しません。
example.vue
<li v-for="number in numbers" :key="number">
{{ number }}
</li>
また、transaction-groupタグを用いる際は必ずkey属性を付ける必要があります。
以上を用いてサンプルを作ってみる
以上を用いてサンプルを作ってみます。
内容としては、初期状態で画面上に数字の「1,2,3」があり、数字追加ボタンをクリックすると4以降の数字が順番に追加され、対象の数字にカーソルをあててクリックするとその数字が削除されるというものとなっています。
App.vue
<template>
<numbers></numbers>
</template>
<script>
import Numbers from "./components/Numbers.vue";
export default {
components: {
Numbers
},
};
</script>
Numbers.vue
<template>
<button @click="addNumber">数字追加</button>
<transition-group name="fade">
<li v-for="(number, index) in numbers" :key="number" @click="remove(index)">
{{ number }}
</li>
</transition-group>
</template>
<script>
export default {
data() {
return {
numbers: [1, 2, 3],
nextNumber: 4,
};
},
methods: {
addNumber() {
this.numbers.splice(this.numbers.length, 0, this.nextNumber++);
},
remove(index) {
this.numbers.splice(index, 1);
},
},
};
</script>
<style scoped>
.fade-enter-from {
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-enter-to {
opacity: 1;
}
.fade-leave-from {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-leave-to {
opacity: 0;
}
</style>
結果
以下のようにボタンをクリックしたら数字が追加され、数字をクリックしたらその数字が消えることが分かります。
おわりに
transition-groupを用いてv-for属性がセットされた要素に対してまとめてレンダリングをすることが出来ました。
transitionは結構難しいですがしっかり理解していきたいと思います。