vue.js編~トランジション~

CSSトランジション

CSSトランジションのデフォルトclass名

class名	役割
v-enter	Enterフェーズ開始前のスタイルを定義するclass名
v-enter-to	Enterフェーズ終了時のスタイルを定義するclass名
v-enter-active	Enterフェーズ継続中のスタイルを定義するclass名
v-leave	v-leaveフェーズ開始前のスタイルを定義するclass名
v-leave-to	v-leaveフェーズ終了時のスタイルを定義するclass名
v-leave-active	v-leaveフェーズ継続中のスタイルを定義するclass名

フェードイン・フェードアウト

Googleが掲げる「10の事実」

1. ユーザーに焦点を絞れば、他のものはみな後からついてくる
2. 1つのことをとことん極めてうまくやるのが一番
3. 遅いより速いほうがいい
4. ウェブ上の民主主義は機能する
5. 情報を探したくなるのはパソコンの前にいるときだけではない
6. 悪事を働かなくてもお金は稼げる
7. 世の中にはまだまだ情報があふれている
8. 情報のニーズはすべての国境を越える
9. スーツがなくても真剣に仕事はできる
10.「すばらしい」では足りない

HTML

<div id="fade">
<button v-on:click="show = !show">表示の切り替え</button>
<transition>
  <p v-if="show">
    1. ユーザーに焦点を絞れば、他のものはみな後からついてくる<br>
    2. 1つのことをとことん極めてうまくやるのが一番<br>
    3. 遅いより速いほうがいい<br>
    4. ウェブ上の民主主義は機能する<br>
    5. 情報を探したくなるのはパソコンの前にいるときだけではない<br>
    6. 悪事を働かなくてもお金は稼げる<br>
    7. 世の中にはまだまだ情報があふれている<br>
    8. 情報のニーズはすべての国境を越える<br>
    9. スーツがなくても真剣に仕事はできる<br>
    10.「すばらしい」では足りない
  </p>
</transition>
</div>

JavaScript

var fade = new Vue({
  el: '#fade',
  data: {
    show: false
  }
});

CSS

.v-enter, .v-leave-to {
  opacity: 0;
}

.v-enter-to, .v-leave {
  opacity: 1;
}

.v-enter-active, .v-leave-active {
  transition: opacity 0.8s;
}

※デフォルトでは表示されている要素にはopacity:1を指定しなくても良いため、v-enter-toとv-leaveは省略できます。

class名の先頭部分を自分で指定

<transition name="fade">のようにname属性を指定すると先頭を「v-〇〇」ではなく「fade-〇〇」等のclass名が使えるようになります。

カスタムトランジション

外部のライブラリを使うときや決まったclass名を指定したい時のクラスの定義

属性名	役割
enter-class	Enterフェーズ開始前のスタイルを定義するclass
enter-to-class	Enterフェーズ終了時のスタイルを定義するclass
enter-active-class	Enterフェーズ継続中のスタイルを定義するclass
leave-class	v-leaveフェーズ開始前のスタイルを定義するclass
leave-to-class	v-leaveフェーズ終了時のスタイルを定義するclass
leave-active-class	v-leaveフェーズ継続中のスタイルを定義するclass

カスタムトランジションクラスの使用例

<transition name=zoom enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
</transition>