2. Vue.jsで表示コンテンツを切り替える際のエフェクト（transition）を設定する

今回は画面の切り替わりにエフェクトを付けてみます。

前回のコードにエフェクトを付けたコードはこちら。

<main id="app">
<div v-cloak>
<transition
  name="fade"
  mode="out-in"
>

<div v-if="center" key="center">
<p>最初の画面</p>
<div v-on:click="watchLeft">左の画面にいく</div>
<div v-on:click="watchRight">右の画面にいく</div>
</div>

<div v-if="left" key="left">
<p>左の画面</p>
<div v-on:click="watchCenter">最初の画面に戻る</div>
<div v-on:click="watchRight">右の画面にいく</div>
</div>

<div v-if="right" key="right">
<p>右の画面</p>
<div v-on:click="watchCenter">最初の画面に戻る</div>
<div v-on:click="watchLeft">左の画面にいく</div>
</div>

</transition>
</div>
</main>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        center: true,
        left: false,
        right: false,
      };
    },
    methods: {
      watchCenter: function () {
        this.center = true;
        this.left = false;
        this.right = false;
      },
      watchLeft: function () {
        this.center = false;
        this.left = true;
        this.right = false;
      },
      watchRight: function () {
        this.center = false;
        this.left = false;
        this.right = true;
      },
    }
  });
</script>

<style>
div.click{
  cursor: pointer;
}

[v-cloak] {
  display: none;
}

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

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
</style>

ポイントは v-cloak と transition です。

v-cloak は、Vue.jsがhtmlを書き換える前のhtmlが一度表示されてしまうのを避けるためのもので、あまり考えずに標準的に実装しておくことをお奨めします。

transition は実際のエフェクトの定義です。
属性として name=”fade” を設定しており、そうすると fade-enter, fade-leave-to などのエフェクトに必要なCSSクラスがVue.jsによって要素要素にいいタイミングで付与されます。上のコードでは、fade-enterなどのCSSを記述していますので、それがコンテンツ切り替え時に読み込まれてtransitionしているということです。
mode=”out-in” は、切り替え前のコンテンツが消えてから切り替え後のコンテンツが現れるようにするための設定で、こちらはあまり考えずに標準的に実装しておきましょう。
　

Vue.jsでサイト実装するならCLIを使う方法もある

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.jsでサイトを実装する場合、今回は上記のCDNでVue.jsを参照して作っていますが、実際にVue.jsで大規模なシステムを動かすとなると、CLIを使う構築方法が主流です。
CLIを使えば開発環境をすべてセットアップして用意してくれますし、複雑な機能も作りこんでいくことができます。