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

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

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

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

まとめ

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