Vue.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 の値を変えれば、別の動きにすることもできます。
【100ウェブ新着情報メルマガ】
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信！