今回は、表示の切り替えにアニメーション効果を与える方法を紹介します。
Vue.js の書き方を最初から知りたい方はこちら(^^)
参考書
トランジションとは
CSS を習得している方にはおなじみかと思いますが、本来なら一瞬で切り替わる表示を、時間をかけて連続的に変化させることでアニメーション効果を与えることですね。
トランジションの使い方
トランジションは前半（Enter フェーズ）と後半（Leave フェーズ）の２つのフェーズに分かます。
フェードインとフェードアウトでいうと、フェードインが Enter フェーズ、フェードアウトが Leave フェーズになります。
Enter フェーズ
Leave フェーズ
さらにそれぞれのフェーズは、「トランジション開始前・トランジション継続中・トランジション終了後」の３つの段階に分かれます。
Vue には、この計６段階のCSSプロパティを調整するための class 名が用意されています。
| class 名 | 役割 |
|---|---|
| v-enter | Enter フェーズ開始前のスタイルを定義 |
| v-enter-to | Enter フェーズ終了後のスタイルを定義 |
| v-enter-active | Enter フェーズ継続中のスタイルを定義 |
| v-leave | Leave フェーズ開始前のスタイルを定義 |
| v-leave-to | Leave フェーズ終了後のスタイルを定義 |
| v-leave-active | Leave フェーズ継続中のスタイルを定義 |
そして、トランジションを適用したい要素を<transition>タグで囲みます。
使い方を確認するため、サンプルではボタンを押すごとに表示と非表示をアニメーションで切り替えます。
<div id="app">
<button v-on:click="show = !show">表示を切り替え</button>
<transition>
<img v-if="show" src="image.jpg" alt="">
</transition>
</div>//Enterフェーズ開始前と、Leaveフェーズ終了後のスタイル
.v-enter, .v-leave-to {
opacity: 0;
}
//Enterフェーズ終了後と、Leaveフェーズ開始前のスタイル
.v-enter-to, .v-leave {
opacity: 1;
}
//Enterフェーズ継続中と、LeaveLeaveフェーズ継続中のスタイル
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}var app = new Vue({
el: '#app',
data: {
show: true
}
});
v-on:click=”show = !show” で、show プロパティの真偽値を反対にしたものを再びshow プロパティに入れています。
こうすることで、クリックする度に v-if=”show” が指定されている要素の表示・非表示が切り替わるわけですね。
そして、フェーズに応じたクラスが適用され、スタイルが変更されるという仕組みです。
ちなみに、デフォルトで表示されている要素には opacity: 1 を指定しなくてもよいです。
class 名を自分で指定する
このように書くことで、class 名の先頭をを「v-」ではなく「 指定した名前 -」にすることができます。
サンプルでは、２種類のエフェクトに名前をつけて分類します。
<div id="app">
<button v-on:click="show = !show">表示を切り替え</button>
<transition name="fade">
<img v-if="show" src="image.jpg" alt="">
</transition>
<transition name="slide">
<img v-if="show" src="image.jpg" alt="">
</transition>
</div>//フェードイン
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
//スライド
.slide-enter, .slide-leave-to {
opacity: 0;
transform: translateX(-100%);
}
.slide-enter-to, .slide-leave {
transform: translateX(0);
}
.slide-enter-active, .slide-leave-active {
transition: opacity 1s, transform 1s;
}
ブラウザの表示↓
今回は以上になります。
ご覧いただきありがとうございました(^^)
続きはこちら↓
参考書
コメント