Vue.jsのtransitionを使ってみる

要素の表示・非表示や更新した際にアニメーション効果を追加できるVue.jsのtransitionを使ってみます。

サンプルコード

アニメーションさせたい要素をtransitionラッパーコンポーネントで囲います。
アニメーションの対象となるのはv-ifやv-showの利用時、動的コンポーネントの場合など条件があるので注意ください。

<div id="app">
  <button v-on:click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">SHOW</p>
  </transition>
</div>

v-ifでの切り替え用にdataを用意します。

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

CSSでアニメーションの設定を行います。

/* フェードイン・フェードアウト中の設定 */
.fade-enter-active, .fade-leave-active {
	transition: opacity .5s;
}
/* フェードイン開始時・フェードアウト終了時の設定 */
.fade-enter, .fade-leave-to {
	opacity: 0;
}

これで要素の表示・非表示時にフェードのアニメーションが行われるようになりました。
transitionのデモページ

アニメーション設定のために、各タイミングで以下のclassがアニメーション要素に適用されます。

transition要素に特に設定がない場合は上記のclass名になりますが、前述のデモのようにname=”fade”が設定されている場合は「v-」が「fade-」に変わります。

アニメーションの途中でJavaScriptの処理などを行えるように、フックの設定ができます。
各イベントはv-onで設定できます。

<div id="app">
  <button v-on:click="show = !show">Toggle</button>
  <transition name="fade"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:enter-cancelled="enterCancelled"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
  >
    <p v-if="show">SHOW</p>
  </transition>
</div>

methodsで各処理内容を設定します。

var app = new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    beforeEnter: function (el) {
      console.log('beforeEnter');
    },
    enter: function (el, done) {
      console.log('enter');
    },
    afterEnter: function (el) {
      console.log('afterEnter');
    },
    enterCancelled: function (el) {
      console.log('enterCancelled');
    },
    beforeLeave: function (el) {
      console.log('beforeLeave');
    },
    leave: function (el, done) {
      console.log('leave');
    },
    afterLeave: function (el) {
      console.log('afterLeave');
    },
    leaveCancelled: function (el) {
      console.log('leaveCancelled');
    }
  }
});

JavaScriptフックのデモページ

それぞれ以下のタイミングで実行されます。

JavaScriptフックは他のアニメーションライブラリ・プラグインなどと組み合わせて使うことができます。

初期描画時のアニメーションの設定もできます。
appear属性を追加します。

<div id="app">
  <button v-on:click="show = !show">Toggle</button>
  <transition name="fade"
    appear
    appear-class="custom-appear-class"
    appear-active-class="custom-appear-active-class"
    appear-to-class="custom-appear-to-class"
  >
    <p v-if="show">SHOW</p>
  </transition>
</div>

appear-classでアニメーション開始時前のclass、appear-active-classでアニメーション中のclass、appear-to-classでアニメーション終了時のclassを指定できます。

上記で設定したclassにアニメーションのスタイルを設定します。

/* アニメーション開始時 */
.custom-appear-class {
	opacity: 0;
}
/* アニメーション中 */
.custom-appear-active-class {
	transition: opacity 1s;
}
/* アニメーション終了時 */
.custom-appear-to-class {
	opacity: 1;
}

これで初期描画時にフェードで表示されるようになりました。
初期描画時のアニメーションのデモページ