小ネタです。

トランジション

Vue.jsでフェードイン/フェードアウトを実装するにはtransition(トランジション)を利用します。

トランジションとは画面遷移など「 場面転換時の演出効果 」を指し、ビデオ編集などでも使われる単語ですね。

Vue.jsでは簡単にトランジションを利用することができますよ。

Vue.js > トランジション効果
https://jp.vuejs.org/v2/guide/transitions.html#ad

確認環境

  • Node.js 7.7.x
  • mpn 4.4.x
  • Vue.js 2.2.x

単一要素のトランジション

1<transition name="fade">
2  <div v-if="ok">toggled content</div>
3</transition>
1.fade-enter-active, .fade-leave-active {
2  transition: opacity .5s
3}
4.fade-enter, .fade-leave {
5  opacity: 0
6}

v-ifに従って要素が表示、非表示されるタイミングでトランジション演出が走ります。


トランジションを適用したい要素をtransitionタグでラップし、name属性に何か名前を指定します。

1<transition name="[トランジションクラス名のプリフィックス]">
2  <[トランジション効果を適用する要素]>
3</transition>

トランジションクラス

Vue.jsでトランジションを利用する場合、適用する効果をCSSクラスとして定義する必要があります。

先ほどの例ではname="fade"としましたが、これはfadeをプリフィックスとした、各イベントに相当するCSSクラスを演出に適用する仕組みのようです。

私も思い違いをしていたのですが、 fadeという演出効果が定義済みと言うわけではない のですね。 名前が一致すれば良く、fadeでもmeltでもdisappearでもなんでも良いのです。


APIリファレンスをチェックすると、nameについて次の説明がありました。

name - string、自動的に生成されるトランジション CSS クラス名で使用する。例: name: ‘fade’ は .fade-enter、.fade-enter-activeなどに自動で展開する。デフォルトは”v”

Vue.js > API > transition
https://jp.vuejs.org/v2/api/#transition

基本はenter, enter-active, leave, leave-activeの4つのCSSクラスを定義してあげればOKです。

先のサンプルにもこの4つが定義されていますね。

1.fade-enter-active, .fade-leave-active {
2  transition: opacity .5s
3}
4.fade-enter, .fade-leave {
5  opacity: 0
6}

イベント一覧は次に掲載の通りですが、上記を押さえておけばとりあえずは良いと思います。

transitionのイベント

  • before-enter
  • before-leave
  • before-appear
  • enter
  • leave
  • appear
  • after-enter
  • after-leave
  • after-appear
  • enter-cancelled
  • leave-cancelled (v-show only)
  • appear-cancelled

Vue.js > API > transition
https://jp.vuejs.org/v2/api/#transition

複数要素のトランジション

トランジションは要素をラップするだけで簡単に利用できるのですが、それは単一要素のみという制約があります。

<transition> は単一要素/コンポーネントに対してトランジション効果を提供します。
https://jp.vuejs.org/v2/api/#transition

たとえば次の場合はエラーとなりトランジション効果が得られません。

1<!-- toransitionが適用できない -->
2<transition>
3  <div v-if="ok">toggled content one</div>
4  <div v-if="ok">toggled content two</div>
5</transition>

こういったシンプルな場合は、次のように階層を深くすることでとりあえず回避することができます。

1<transition>
2  <div v-if="ok">
3      <div>toggled content one</div>
4      <div>toggled content two</div>
5  </div>
6</transition>

しかしながらv-forを利用する場合この回避方法は使えません。

1<!-- toransitionが適用できない -->
2<transition>
3  <detail-component v-for="item in items" :key="item" />
4</transition>

Chrome Developer Toolsには次のようなメッセージが出力されるため、対応はすぐにわかりますね。

1<transition> can only be used on a single element. Use <transition-group> for lists.
2(found in <Content> at /path/to/Content.vue)

そうです、こんな時はtransition-groupの出番です。

<transition-group> は複数の要素/コンポーネントに対してトランジション効果を提供します。 はあるがままに DOM 要素を描画します。
https://jp.vuejs.org/v2/api/#transition-group


先のエラーが出たコードを次のように書き換えることで、トランジション演出が出るようになりました。

1<transition-group>
2  <span v-for="item in items" :key="item">
3    <detail-component :item="item" />
4  </span>
5</transition-group>

transition-groupについては、公式ガイドもご覧ください。

Vue.js > ガイド > トランジション効果 > リストトランジション
https://jp.vuejs.org/v2/guide/transitions.html#リストトランジション

おわりに

Vue.jsならトランジション演出も簡単に実装できます。

単一要素ならtransition、複数要素ならtransition-groupです。


Vue.js入門 基礎から実践アプリケーション開発まで

川口 和也,喜多 啓介,野田 陽平,手島 拓也,片山 真也
出版社:技術評論社  発売日:2018-09-22

Amazonで詳細を見る

基礎から学ぶ Vue.js

mio
出版社:シーアンドアール研究所  発売日:2018-05-29

Amazonで詳細を見る

Vue.js: Up and Running: Building Accessible and Performant Web Apps

Callum Macrae
出版社:O'Reilly Media  発売日:2018-03-23

Amazonで詳細を見る