【Vue.js 入門】表示の切り替えを滑らかにする方法(トランジション)

Vue.js

今回は、表示の切り替えにアニメーション効果を与える方法を紹介します。


Vue.js の書き方を最初から知りたい方はこちら(^^)



参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

トランジションとは

CSS を習得している方にはおなじみかと思いますが、本来なら一瞬で切り替わる表示を、時間をかけて連続的に変化させることでアニメーション効果を与えることですね。

トランジションの使い方

トランジションは前半(Enter フェーズ)と後半(Leave フェーズ)の2つのフェーズに分かます。

フェードインとフェードアウトでいうと、フェードインが Enter フェーズ、フェードアウトが Leave フェーズになります。



Enter フェーズ



Leave フェーズ




さらにそれぞれのフェーズは、「トランジション開始前・トランジション継続中・トランジション終了後」の3つの段階に分かれます。

Vue には、この計6段階のCSSプロパティを調整するための class 名が用意されています。

class 名役割
v-enterEnter フェーズ開始前のスタイルを定義
v-enter-toEnter フェーズ終了後のスタイルを定義
v-enter-active Enter フェーズ継続中のスタイルを定義
v-leaveLeave フェーズ開始前のスタイルを定義
v-leave-toLeave フェーズ終了後のスタイルを定義
v-leave-activeLeave フェーズ継続中のスタイルを定義


そして、トランジションを適用したい要素を<transition>タグで囲みます。

<transition> ~ </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 名を自分で指定する

<transition name=”すきな名前”></transition>

このように書くことで、class 名の先頭をを「v-」ではなく「 指定した名前 -」にすることができます。


サンプルでは、2種類のエフェクトに名前をつけて分類します。

<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;
}



ブラウザの表示↓





今回は以上になります。
ご覧いただきありがとうございました(^^)

続きはこちら↓





参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

コメント

コンタクトフォーム

    タイトルとURLをコピーしました