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 プロジェクト名
```

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

```terminal
$ cd my-project
$ npm run serve
```
`http://localhost:8080/`にアクセスする

以下のようなページが開かれたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618705/288ef2f5-5556-08e4-12d8-07fd05c46ee6.png)

参照
>https://cli.vuejs.org/

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

```terminal
$ 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アイコンが動いているのがわかります。

![abcfef7615a2f72741769298d5216c1e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618705/81a3aa1c-0168-1536-388d-8c85da085ba1.gif)


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

#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>
```

```css
.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アイコンが動きます。
![ee5b943244c7ae663ae9eb9cceb6dd31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618705/26556d93-44e8-ddd4-6848-5692c55b3dd1.gif)

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