vue.jsにお手軽にcssエフェクトをかけたいanimate.cssを導入したいときに読む記事

vue.jsにお手軽にcssエフェクトをかけたいときに読む記事

いろいろなアニメーションをcssで表現できるよいうになってきていますが、自分で1から作るのはめんどくさいです。
そこでanimate.cssを導入してお手軽にサイトに動きを加えて行く方法をまとめました。
エディターは好きなものを使ってください。
私はVScodeを使ってます。

vue-cliの導入

terminalでvue-cliをインストールします。

$ npm install -g @vue/cli

参照

https://cli.vuejs.org/

vue-cliでプロジェクトを作る

ターミナルでプロジェクトを作ります。名前はお好きなものを。

$ vue create プロジェクト名

プロジェクトができたらできたプロジェクトに移動して、とりあえずローカルサーバーをたたげてみる。

$ cd my-project
$ npm run serve

http://localhost:8080/にアクセスする

以下のようなページが開かれたらOKです。

参照

https://cli.vuejs.org/

animate.cssの導入

続いてanimate.cssをインストールしていきます。

$ npm install animate.css --save

続いて、main.jsでanimate.cssを呼び出せるようにしておきます。
以下のようにコードを追加してください。

main.js

import VAnimateCss from 'animate.css';
// Install Animate.css
Vue.use(VAnimateCss);

参照

https://animate.style/

animate.cssを適用する

サイトを確認すると英語で使い方が書いてあります。google翻訳で日本語にしてもいいです。
とりあえず、簡単な使い方を紹介します。
classにanimate__animatedをつけて、プラスどんな効果かを示すclass名をつけます。
例えば、バウンドする効果をつかたければ、以下のようになります。

class="animate__animated animate__bounce"

試しにVueのアイコンを動かしてみます。
App.vueのアイコン部分をにclassを追加して動くようにしていきます。

before

App.vue

<template>
  <div id="app">
      <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

after

App.vue

<template>
  <div id="app">
    <img
      class="animate__animated animate__bounce"
      alt="Vue logo"
      src="./assets/logo.png"
    />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

localhostで確認すると、Vueアイコンが動いているのがわかります。

ただし、これだとロード時だけしか動かないので、ずっと動かしたり、タイミングをつけたりするにはもうちょっと工夫が必要です。

classにinfiniteをつけて、ずっと動くようにする

先程のclassにinfiniteを加えると、ずっと動くようになります。

App.vue

<template>
  <div id="app">
    <img
      class="animate__animated animate__bounce infinite"
      alt="Vue logo"
      src="./assets/logo.png"
    />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

でもできればタイミングは自分で設定したいですよね。

animate.cssの効果を微調整する

オリジナルのクラスを作る

animate.cssが提供しているクラス名ではなくて自分で設定することができます。
例えばmy_bounceというクラス名をつけたいときは以下のように自分でcssを設定します。

App.vue

<template>
  <div id="app">
    <img
      class="animate__animated my_bounce"
      alt="Vue logo"
      src="./assets/logo.png"
    />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

.my_bounce {
  animation: bounce;
  animation-delay: 2s;
}

animationは自分の好きなものを選ぶことができます。
animation-delayでタイミングを設定する事ができます。
他にも動く時間を決めたり、動作を何回繰り返すかなどを設定できます

:classを使ってanimate.cssを適用する方法

最後にclassごとに別々のアニメーションを設定し、それを切り替えられるようにしてみます。
Vue.jsでは:classを使えばcssを簡単に切り替えられるのでこれを応用します。
例えば、ボタンを押したときだけmy_bounceが作動するようにしてみましょう。
そのためにdataでボタンのon/offを操作するisBounceを作り、falseにしておきます。
これがtrueになることでmy_bounceが作動するようにします。

App.vue

  data() {
    return {
      isBounce: false,
    }
  }

そして、:classを使ってisBounceがtrueならmy_bounceが動作するようにコードを書きます。

App.vue

<template>
  <div id="app">
    <img
      class="animate__animated" 
      :class="{my_bounce: isBounce}"
      alt="Vue logo"
      src="./assets/logo.png"
    />
    <div>
      <button @click="isBounce = !isBounce">クリック</button>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

@click="isBounce = !isBounce"はクリックするごとにture/falseを切り替えるというコードです。
これでボタンをクリックするごとにisBounceの値が切り替わりtrueのときはVueアイコンが動きます。

まとめ

Vue.jsにanimate.cssを導入する方法を紹介しました。
Vue.jsはもともとアニメーションを設定しやすいのですが、animate.cssを使えば更に早く実装することができ、コードがわかりやすいので使って見ました。
皆さんのお役に立てば幸いです。