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

CSS
この記事は約5分で読めます。

みなさんこんにちは!

イザナギです!

みなさんはいかがお過ごしですか?

私は最近Youtubeをみることが多くなってきました。

最近は、モニターの大画面にYouTubeの動画を映しながら作業しています。

さて、今回はNuxt(Vue)に関する話題です。

私は、今までアニメーションをjQueryを用いて作っていました。

しかし、Nuxt(Vue)を多く使うようになったので、jQueryを用いずに開発しようかなと思いはじめました。

なので、初めは基本的なことからやっていきたいと考えております。

transition

まず、Nuxt(Vue)でアニメーションを作成するには「transition」を使うのが一般的みたいですね。

https://ja.nuxtjs.org/api/pages-transition/
Enter/Leave & List Transitions — Vue.js
Vue.js - The Progressive JavaScript Framework

アニメーションをつけたい要素一つを「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
Vue.js - The Progressive JavaScript Framework

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」を使って実装してみたいと思います。

それでは、今回はここで筆を置かせていただきます!

最後まで記事をご覧いただきありがとうございました!

コメント

タイトルとURLをコピーしました