・Vue.jsでTransitionGroupはどう使うの？
こんな疑問にお答えします。
「Transition」は直下にある1つの要素でしか使えませんよね。
ただ場合によっては、v-forでループした複数のタグに対して使用したい時があるかと。
そんなときに便利なのが「TransitionGroup」です。
「TransitionGroup」を使えば、ループで複製された複数タグに対して活用可能です。
便利だね！
ということで、この記事では「Vue.jsのTransitionGroupの使い方」について解説していきます！
Vue.jsのTransitionGroupの使い方
目次
【解説】Vue.jsのTransitionGroupの使い方
そんな「TransitionGroup」を使った例がこちら↓
See the Pen vue TransitionGroup① by jito-coder (@jito-coder) on CodePen.
ボタンをクリックするたび、、配列最初の1個目が透過しつつ非表示になりますよね。
複数タグでも実装できてるのがわかるかと。
<script setup lang="ts">
import { ref } from 'vue';
const fruits = ref(['りんご', 'もも', 'みかん', 'ぶどう']);
const removeLastFruit = () => {
if (fruits.value.length > 0) {
fruits.value.shift();
}
};
</script><template>
<TransitionGroup tag="ul">
<li v-for="fruit in fruits" key="fruit" >
{{ fruit }}
</li>
</TransitionGroup>
<button v-on:click="removeLastFruit">配列1個めを消す</button>
</template><style scoped>
.v-enter-from {
opacity: 0;
}
.v-enter-active {
transition: opacity .5s;
}
.v-enter-to {
opacity: 1;
}
.v-leave-from {
opacity: 1;
}
.v-leave-active {
transition: opacity .5s;
position: absolute;
}
.v-leave-to {
opacity: 0;
}
.v-move {
transition: all 1s;
}
</style>主な使い方がこちら↓
①：「TransitionGroup」で囲む
②：複数要素を記述
③：「tag」を使って囲むタグを指定
④：付与クラスに対してCSSを記述
⑤：「v-move」に対してCSSを記述
順に解説してきます。
まず「TransitionGroup」というコンポーネントのタグで囲みましょう。
<TransitionGroup>
</TransitionGroup>続いて中に実装したい要素を入れていきます。
今回は例として複数要素で出力するようv-forを記述しました。
<TransitionGroup>
<li v-for="fruit in fruits" key="fruit" >
{{ fruit }}
</li>
</TransitionGroup>v-forの使い方を知りたい方は下記をどうぞ。
【解説】Vue.jsの「v-for」の使い方【key属性に注意】 次に必須ではありませんが「tag」を記述します。
この「tag」を使うと、その値が大枠のタグになってくれるんですよね。
今回は例として「tag=”ul”」と指定しました。
<TransitionGroup tag="ul">
<li v-for="fruit in fruits" key="fruit" >
{{ fruit }}
</li>
</TransitionGroup>すると「ulタグ」で囲われるよう出力されます。
ちなみに何も設定してないと、タグが何も囲われません。
そしたらTransitionの時と同様に、付与されるクラスにCSSを当てていきます。
透過アニメーションを実装したいなら下記の感じ↓
<style scoped>
.v-enter-from {
opacity: 0;
}
.v-enter-active {
transition: opacity .5s;
}
.v-enter-to {
opacity: 1;
}
.v-leave-from {
opacity: 1;
}
.v-leave-active {
transition: opacity .5s;
}
.v-leave-to {
opacity: 0;
}
</style>付与されるクラス等は下記記事にて解説しておりますので、気になる方はどうぞ。
【解説】Vue.jsのTransitionの使い方【クラス名変更／初回描画時】 TransitionGroupでは新たに「v-move」というクラスが付与されます。
このクラスは削除・追加された要素ではない、他の周りの要素に対して付与されるのが特徴です。
デフォルトのままだと、削除・追加された要素以外の要素は、カクカク動いてしまいます。
これを解消するために「v-move」に対してtransitionを指定してあげましょう。
下記のように「v-move」に対して「transition: all 1s;」のように指定すると、周りの要素がスムーズに動くようになります。
<style scoped>
~~
.v-move {
transition: all 1s;
}
~~
</style>また要素が削除されると、他要素は即座に位置が変わります。デフォルトのままだとカクカクしてしまう。
これを改善するために「v-leave-active」に対して「position: absolute;」をつけてあげましょう。
.v-leave-active {
transition: opacity .5s;
position: absolute;
}これで即座に再配置されないため、スムーズに動いてくれます。
【解説】Vue.jsのTransitionGroupを使う時の注意点
「TransitionGroup」を使うときは、いくつか注意点があります。
それがこちら。
①：key属性が必要
②：modeは使用できない
順に解説してきます。
「TransitionGroup」を使うときは、直下の要素にkey属性が必要です。
そのため「key=””」を記述しておきましょう。
ちなみにv-ifを使うときは、内部的にkey属性が使われているらしいのでそのままでOK。
「mode=”out-in”」や「mode=”in-out”」が使えないのが注意点です。
TransitionGroupは複数要素で実装できますからね。
そのため使用しないようにしましょう。
【解説】Vue.jsのTransitionGroupの使い方【注意点】：まとめ
- 「TransitionGroup」を使えば複数要素で使える
- 「tag」を使えば囲むタグの指定可能
- 削除・追加要素の周りの要素に「v-move」がつく
- 直下の要素にはkey属性をつけておく
- mode=””は使えない
TransitionGroupを使う時はためしてみてね！
