基礎からメモ： Vue.js CH6-p195 基本的なトランジションの使い方

トランジション用クラスの適用

トランジション効果を適用したい要素を<transition>タグで囲むことで、トランジション用のクラスが適用される。

<div id="app">
  <p><button v-on:click="show=!show">切り替え</button></p>
  <transition>
    <div v-show="show">
      トランジションさせたい要素
    </div>
  </transition>
</div>

ボタンクリックで要素の表示・非表示をふわっと切り替える。

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

あとはそのクラスにCSSスタイルを定義する。 <transition>タグで囲まれた要素がDOMに追加される際にはenter、削除される際にはleaveという文字を含んだクラスが追加される。

/* 1秒かけて透明度を遷移 */
.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}
/* 見えなくなるときの透明度 */
.v-enter, .v-leave-to {
  opacity: 0;
}

v-show以外にもv-ifも使える。display:noneで消えて無くなる要のCSSトランジションであっても、animationプロパティを使い分ける必要が無く、Vue.js がクラス管理を自動で行う。

トランジション用クラスのクラス名変更

デフォルトではv-プレフィックスが付くトランジション・クラス名は、<transition>タグにname属性で名前指定することで、プレフィックスをカスタマイズ可能。

<transition name="demo">
  <div v-if="show">トランジションさせたい要素</div>
</transition>

.demo-enter-active, .demo-leave-active {
  transition: opacity 1s;
}
.demo-enter, .demo-leave-to {
  opacity: 0;
}

今度はv-ifで切り替えているので要素はコメント化されてDOMから消えるが、見た目の動作は変わらない。

初期描画でのトランジション適用

デフォルトでは初期描画時にトランジションは適用されない。appear属性を付けると、初期描画でもふわっと表示される。

<transition appear>
  <div v-if="show">トランジションさせたい要素</div>
</transition>