Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

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

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

transitionについて

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

サンプルコード

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

<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-leave-toなどのv-を接頭辞としたクラスが付与されますが、のようにnameを付与することでhoge-leave-toなどの任意の接頭辞にすることができます。

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

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