2 flat logo on transparent 256
2018-08-12

Vue.jsとAnimate.cssで手軽にアニメーションを実現する|コピペで動くサンプル付き

20180812kosadad

今回はVue.jsとAnimate.cssをサンプルコードを利用して解説します。

なお、Animate.cssは単独での利用も可能です。

Animate.cssとは

Animate.cssはアニメーションを手軽に行えるライブラリになります。ダウンロードして読み込むこともできますし、CDNで利用できるので、手軽に活用できます。

そもそもAnimate.cssの動作例はこちら からご覧になれます。

サンプルコード

以下内容をメモ帳などに貼り付けて、html形式で展開すれば利用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>テストAnimate.css</title>
    <!--animateCss -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
    <!--JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

</head>
<body>
<!--以下は通常のanimate.cssの利用-->
<div>
    <h1 class="animated bounceInDown">上部から出てくる</h1>
    <h2 class="animated fadeInRight">右からフェードインしてくる</h2>
    <h2 class="fadein-test animated fadeInRight">右からフェードインしてくる(2秒遅れて)3回繰り返す</h2>
    <h3 class="animated fadeOutUp">この部分はフェードアウト</h3>
</div>

<!--以下からvueとanimate.cssの利用-->

<div id="example-animate">
    <button @click="show = !show">
        ボタンを押すと、以下vueテキストが動作
    </button>
    <transition
            name="custom-classes-transition"
            enter-active-class="animated zoomOutLeft"
            leave-active-class="animated bounceOutUp">
        <p v-if="show">以下vueテキスト</p>
    </transition>
</div>
</body>

<script>
    new Vue({
        el: '#example-animate',
        data: {
            show: true
        }
    })

</script>
<style>
    .fadein-test {
        animation-delay: 2s;
        animation-iteration-count: 3;
    }
</style>
</html>

サンプルコード解説

CDNを読み込む

Animate.cssを利用する場合は、htmlのヘッダーへ以下CDNを 記載します。

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

これだけで、利用できるようになります。

Animate.cssを利用する

基本はdivタグやpタグhタグのクラスに適用します。

<h1 class="animated bounceInDown">上部から出てくる</h1>

クラスはclass="animated アニメーションクラスを記載"となります。

Animate.cssの動作内容のサンプルは こちら からご覧になれます。

アニメーションクラスの一覧は git のclass nameに記載されています

Animate.cssをカスタマイズする

以下ではfadein-testというクラスでアニメーションの動作を カスタマイズしています

<h2 class="fadein-test animated fadeInRight">右からフェードインしてくる(2秒遅れて)3回繰り返す</h2>

以下CSS

<style>
    .fadein-test {
        /*遅延処理 以下は2秒後に動作させる*/
        animation-delay: 2s;
        /*繰り返し処理の設定 以下は3回繰り返す*/
        animation-iteration-count: 3;
    }
</style>

Vue.jsと連動する

今回はボタンを2回押した場合に動作が変わる設定にしています。

<div id="example-animate">
    <button @click="show = !show">
        ボタンを押すと、以下vueテキストが動作
    </button>
    <transition
            name="custom-classes-transition"
            enter-active-class="animated zoomOutLeft"
            leave-active-class="animated bounceOutUp">
        <p v-if="show">以下vueテキスト</p>
    </transition>
</div>

初回にボタンを押した場合の動作をenter-active-classで指定し

二回目の動作をleave-active-classで指定しています。

この2つのクラスはカスタムトランジションクラスでVue.jsのDOMが更新・削除・追加された場合に適用する カスタムトランジションクラスになります。

Vue.jsの発火はbuttonタグで実施し、buttonが押された場合に クラスを変更します。

以上になります。

その他関連記事

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

Ruby On RailsでSassを活用し、CSS作成を高速・効率化する

Vue.jsでマークダウンに対応したメモ帳アプリを作成する|コピペで動くサンプルコード付き

Vue.jsでSVGのアイコンを操作する|コピペで動くサンプル付き

前の記事
次の記事