Merge pull request #1595 from kkukelka/feat/page-transition

1442 add transition between pages

Author: yangwao

layouts/centered-half-layout.vue

@@ -6,7 +6,7 @@
         <div class="container">
           <div class="columns is-centered">
             <div class="column is-half">
-              <router-view />
+              <Nuxt />
             </div>
           </div>
         </div>

layouts/default.vue

@@ -4,7 +4,8 @@
     <main class="is-flex-grow-1">
       <section class="section">
         <div class="container">
-          <router-view :key="$route.fullPath" />
+          <!-- <router-view :key="$route.fullPath" /> -->
+          <Nuxt />
         </div>
       </section>
     </main>

layouts/full-width-layout.vue

@@ -2,7 +2,7 @@
   <div class="min-h-full is-flex is-flex-direction-column">
     <Navbar v-if="isNavbarVisible" />
     <main class="is-flex-grow-1">
-      <router-view />
+      <Nuxt />
     </main>
     <Footer />
   </div>

styles/global.scss

@@ -156,3 +156,14 @@ body {
         color: $primary-light !important;
     }
 }
+
+// global CSS for page transitions
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 250ms
+}
+
+.page-enter,
+.page-leave-active {
+  opacity: 0
+}