KVue.jsでシングルページアプリケーションを作る

3. animate.cssでVue.jsのコンテンツ切り替えエフェクトのバリエーションを増やす

それでは前回に引き続き、コンテンツ切り替え時のエフェクトについてさらに豊かなものにするべく、今回は animate.css のエフェクトを利用してみることにします。

さっそくコードです。
animate.cssを読み込みます。
※ animate.cssはバージョン4から大幅に変わっているので、今回は3系に対応したCDNを使っています。

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css">
</head>

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

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

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

<div v-if="right" key="right">
<div class="animated" v-bind:class="rightSlideClass">
<p>右の画面</p>
<div v-on:click="watchCenter">最初の画面に戻る</div>
<div v-on:click="watchLeft">左の画面にいく</div>
</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,
        leftSlideClass: "fadeInBottomLeft",
        rightSlideClass: "fadeInBottomRight",
      };
    },
    methods: {
      watchCenter: function () {
        this.center = true;
        this.left = false;
        this.right = false;
      },
      watchLeft: function () {
        this.center = false;
        this.left = true;
        this.right = false;
        this.leftSlideClass = "fadeInLeft";
      },
      watchRight: function () {
        this.center = false;
        this.left = false;
        this.right = true;
        this.rightSlideClass = "fadeInRight";
      },
    }
  });
</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>
</body>

　
これで、左のコンテンツは左から、右のコンテンツは右から、上のコンテンツは上から現れてくるようになりました。
メソッド実行時の leftSlideClass rightSlideClass の値を変えれば、別の動きにすることもできます。

前の記事
2. Vue.jsで表示コンテンツを切り替える際のエフェクト（transition）を設定する 次の記事
4. axiosを使ってREST APIで取得した情報を、Vue.jsでサイトに表示する