Nuxt.js(Vue.js)において、ページ遷移アニメーションを設定することができますが、日本の記事を調べると、個別に設定する方法は載っていますが、全ページにページ遷移アニメーションを一括で指定する方法は載っていなかった（執筆時点）のですが、英語に拡げて調べてみたらすぐ出てきたので、ご紹介します。

数日かけて調べて困って、まわりの方に相談したりとかしてもわからなくて結構悩んだのできっと知りたい人いるはず。

方法

真理はいつだって極めてシンプル。

すべてのページに適用されるcssを書いて、そこにこのコードを入れるだけ。

.page-enter, .page-leave-to{
  opacity: 0;
}
.page-enter-active, .page-leave-active{
  transition: opacity .4s;
}
.layout-enter, .layout-leave-active{
  opacity: 0;
}
.layout-enter-active, .layout-leave-active{
  transition: opacity .4s;
}

sassで書くならこっち。

.page-enter, .page-leave-to
  opacity: 0
.page-enter-active, .page-leave-active
  transition: opacity .4s
.layout-enter, .layout-leave-active
  opacity: 0
.layout-enter-active, .layout-leave-active
  transition: opacity .4s

これだけ。

もちろんkeyframeアニメーションも可能。

個別にアニメーション設定するなら、pageファイルにtransitionを設定したりnameつけたりいろいろしなきゃいけないけれど、全体に当てる方法はこれでOK。

結構調べても出てこなかったのだけど、需要はきっとあると思ったので記事化しました。

終わりに

Remote.vue閲覧しました。Twitterもちょいちょい取り上げてもらったけれど、レベルが追いつかないというか、日本の結構なつよつよなみなさんが参加されてるのかな。内容が難しかった💦
でもあーあれね！って言えるようにがんばります。