🐙

Nuxt(Vue)で全ページのページ遷移アニメーションを一括で指定する

2021/07/11に公開

nuxt.config.js

  css: [
    '@/assets/css/main.css',
  ],

assets/css配下にmain.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;
  }

参考
https://ringo-cafe.com/blog/nuxt-anime-all-page/
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-css

Discussion