はじめに
Vue.jsの便利機能の一つのtransition。今回はそちらを使ってBootstrapのカードを並べるタイプの表示に対してtransitionをかけていきたいと思います。
具体的なシチュエーション
ソースコード
song.vue
<div class="container">
<transition-group class="row"> <!--ここをdivから変える-->
<div class="card border-info col-lg-4 col-sm-6" v-for="item in items" :key="item.Artist+item.Title">
<div class="card-body">
<h2 class="card-title">{{ item.Title }}</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item">アーティスト名：{{ item.Artist }}</li>
<li class="list-group-item">ボーカル： {{ item.Vocal.join('、') }}</li>
<li class="list-group-item">作詞：{{ item.Word.join('、') }}</li>
<li class="list-group-item">作曲：{{ item.Composer.join('、') }}</li>
<li class="list-group-item">編曲：{{ item.Arranger.join('、') }}</li>
<li class="list-group-item">作品：{{ item.TieUp[0] }}</li>
<li class="list-group-item">ブランド：{{ item.Brand[0] }}</li>
<li class="list-group-item">ジャンル： {{ item.Genre.join('、') }}</li>
</ul>
</div>
</div>
</transition-group> <!--ここをdivから変える-->
</div>
song.css
.v-enter-active, .v-leave-active {
transition: opacity .5s;
} /*遷移に0.5秒かける*/
.v-enter, .v-leave-to{
opacity: 0;
} /*現れる時の最初と消える時の最後のopacityを0に指定*/
簡単な解説
ぼくが最初にハマってしまったのは既存のdivタグをそのままにしてtransition-groupタグをいれようとしてしまったところです。エラーこそは出ませんがカード自体が表示されなくなります。classがrowのところを指定してあげるのが一番いい感じなのかなと個人的に思います。あとtransition-group使うときはkeyを必ず設定してください。ちゃんと表示されません。
次にcssについてです。本当はここで指定した4つ以外にも.v-enter-toと.v-leaveを指定しないといけないのですがどちらもopacityが1なのでここでは省略できます。ちなみにそれぞれのCSSクラスの意味をまとめると次のような感じです。
- v-enter ： 表示する時の最初の状態
- v-enter-active ： 表示するときの遷移の設定
- v-enter-to : 表示する時の最後の状態
- v-leave : 消すときの最初の状態
- v-leave-active : 消すときの遷移の設定
- v-leave-to : 消すときの最後の状態
また今回はnameを指定せずにデフォルトのvを使いましたが、できればnameは指定した方がいいと思います。transition-groupタグでnameを指定して、その時に指定したnameをcssのvと入れ替えてください。