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>