Nuxt.jsでページ遷移のときにtransitionをつける

Nuxt.jsでページ遷移時にちょっとしたアニメーションをつけたいという要望があり、調べました。

やったことは https://nuxtjs.org/ja/docs/configuration-glossary/configuration-transition/ この通りに設定するだけ。

全ページでtransitionをつけるのは面倒なのでdefault.vueの中で設定します。

<template>
  <div>
    <Header />
    <Nuxt />
    <Footer />
  </div>
</template>
<style>
.page-enter-active,
.page-leave-active {
  transition: opacity 1s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}
</style>

Nuxt.jsではデフォルトでtransitionのnameがpageになっており、自動でページ遷移時にpage-enter-activeなどのcssクラスが付与されるので、その部分のcssを設定するだけです。

これでページ遷移時にopacityが少しずつ0になり、遷移先ではopacityが少しずつ1になるという動きができるようになりました。
簡単！