feat(theme-default): add page transition

Author: meteorlxy

packages/@vuepress/theme-default/src/layouts/Layout.vue

@@ -27,19 +27,28 @@
 
     <Home v-if="$frontmatter.home" />
 
-    <Page v-else>
-      <template #top>
-        <slot name="page-top" />
-      </template>
-      <template #bottom>
-        <slot name="page-bottom" />
-      </template>
-    </Page>
+    <Transition v-else name="fade-slide-y" mode="out-in">
+      <Page :key="$page.path">
+        <template #top>
+          <slot name="page-top" />
+        </template>
+        <template #bottom>
+          <slot name="page-bottom" />
+        </template>
+      </Page>
+    </Transition>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  Transition,
+} from 'vue'
 import { useRouter } from 'vue-router'
 import { usePageFrontmatter, useThemeLocaleData } from '@vuepress/client'
 import Home from '../components/Home.vue'
@@ -57,6 +66,7 @@ export default defineComponent({
     Page,
     Navbar,
     Sidebar,
+    Transition,
   },
 
   setup() {

packages/@vuepress/theme-default/src/styles/index.styl

@@ -15,6 +15,7 @@
 @require './sidebar';
 @require './sr-only';
 @require './toc';
+@require './transitions';
 
 // palette-stylus
 @require '~@temp/style';

packages/@vuepress/theme-default/src/styles/transitions.styl

@@ -0,0 +1,13 @@
+.fade-slide-y-enter-active {
+  transition: all .3s ease;
+}
+
+.fade-slide-y-leave-active {
+  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.fade-slide-y-enter-from
+.fade-slide-y-leave-to {
+  transform: translateY(10px);
+  opacity: 0;
+}