vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる

参考にさせて頂いたページ

transitionについて

• トランジション効果 - Vue.js

動的コンポーネントについて

• コンポーネント - Vue.js

サンプルコード

以下のような感じで書いてみました。

<style>
.hoge-enter-active,
.hoge-leave-active {
  transition: opacity 2s
}
.hoge-enter,
.hoge-leave-to /* hoge-leave-to クラスはバージョン 2.1.8 以降でのみ利用可能 */ {
  opacity: 0
}
</style>

<div id="transition-app">
  <h1>Vue.jsの練習 静的なページ</h1>
  <button v-on:click="fade">click here</button>
  <transition name="hoge">
    <div v-show="state.contentIsShow">トグルするコンテンツ</div>
  </transition>
<!--/#transition-app--></div>

<script src="js/vue.js"></script>
<script>
  var fadeApp = new Vue({
    el: '#transition-app',
    data: {
      state: {
        contentIsShow: true,
      },
    },
    methods: {
      fade: function(){
        this.state.contentIsShow = !this.state.contentIsShow;
      },
    },
  });
</script>

サンプルコードについて

公式サイトにあるように、以下の条件のいずれかに当てはまるタグをtransitionタグで囲うことでenteringとleavingのトランジション効果が得られるということらしいので、サンプルコードではv-showを使ってみました。

• 条件付きの描画 (v-if を使用している)
• 条件付きの表示 (v-show を使用している)
• 動的コンポーネント (v-bind:is を使用している)
• コンポーネントルートノード (Component root nodes)

サンプルコードの場合は以下のような感じで動くようです。

• v-showの条件がfalseになったとき、leavingのトランジション効果が起こる
• v-showの条件がtrueになったとき、enteringのトランジション効果が起こる

トランジション効果が起こる直前や起こっているとき、完了した直後などに色々なクラスが付与されます。
そのクラス名については、公式ページを参考にするのが良いと思います。

デフォルトでは、v-leave-toなどのv-を接頭辞としたクラスが付与されますが、のようにnameを付与することでhoge-leave-toなどの任意の接頭辞にすることができます。

他にもありますが、vue.jsのトランジション効果により、例えば以下のようなクラスが付与されます。

• .v-enter-active
• .v-leave-active
• .v-enter-to
• .v-leave-to