Nuxt(Vue)とAnimate.cssでアニメーションをつける方法

みなさんこんにちは！
イザナギです！
みなさんはいかがお過ごしですか？
私は最近Youtubeをみることが多くなってきました。
最近は、モニターの大画面にYouTubeの動画を映しながら作業しています。

さて、今回はNuxt（Vue）に関する話題です。
私は、今までアニメーションをjQueryを用いて作っていました。
jQueryを使って文字を１文字ずつ浮き上がらせる！
今回は、jQueryを用いて一文字づつ文字を表示させるメソッドをご紹介したいと思います。
文字を一文字づつ他のタグに挿入しながらアニメーションをつけています。
しかし、Nuxt（Vue）を多く使うようになったので、jQueryを用いずに開発しようかなと思いはじめました。
なので、初めは基本的なことからやっていきたいと考えております。

transitionを使用する

まず、Nuxt（Vue）でアニメーションを作成するには「transition」を使うのが一般的みたいですね。
アニメーションをつけたい要素一つを「transition」で囲みます。

<transition
  name="zoom"
  enter-active-class="animated zoomInUp"
  leave-active-class="animated zoomOut"
  >
    <p v-if="show">{{this.title}}</p>
</transition>

こちらの方法では、Animate.cssなどの外部スタイルシートを利用する時によく使われる方法だそうです。
上記コードのように「transition」に様々なタグをつけて、アニメーションの設定をすることができます。
タグによって、設定が異なります。簡単に以下にまとめてみました！

• enter-class（アニメーション開始時）
• enter-active-class（アニメーション中）
• enter-to-class（アニメーション終了時）
• leave-class（enter-to-classが終わった後のアニメーション開始時）
• leave-active-class（enter-to-classが終わった後のアニメーション中）
• leave-to-class（enter-to-classが終わった後のアニメーション終了時）

また、タグによる設定を行わずに、cssに記載することもできます。
例えば、以下のようになります。
ちなみに、フェードアニメーションです。

<transition name="fade">
  <p v-if="show">{{this.title}}</p>
</transition>
<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>

cssに記載する時に「transition」のタグで指定した「name」を使って、fade-enter-active、fade-enterなどとnameで指定したものを先頭につけます。
種類は先ほどと大体一緒ですね。（vにnameで指定したものを挿入します。）

• v-enter
• v-enter-active
• v-enter-to
• v-leave
• v-leave-active
• v-leave-to

Enter/Leave List Transitions — Vue.js

transition-group

また、リストなどの複数の要素にアニメーションをつけたいときは「transition-group」を使うみたいです。

// 参考例
<transition-group tag="div" name="anime">
  <div v-for="list in lists" :key="list">
    {{list}}
  </div>
</transition-group>

まとめ

今回はNuxt（Vue）による、アニメーションを実装を簡単にまとめてみました。
「transition」を使えば簡単にアニメーションを実装することができるみたいですね！
また時間がありましたら、前回jQueryで作ってみたアニメーションを「transition」を使って実装してみたいと思います。
それでは、今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきありがとうございました！