添加了css动画画面切换更流畅

.vitepress/theme/index.mts

@@ -1,2 +1,30 @@
+import type { EnhanceAppContext, Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-export default DefaultTheme
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app, router }: EnhanceAppContext) {
+    // 监听路由变化，添加页面切换动画
+    if (typeof window !== 'undefined') {
+      // 首次加载时添加动画
+      router.onAfterRouteChanged = () => {
+        const content = document.querySelector('.VPDoc, .VPContent')
+        if (content) {
+          content.classList.remove('page-transition-leave')
+          content.classList.add('page-transition-enter')
+          setTimeout(() => {
+            content.classList.remove('page-transition-enter')
+          }, 200)
+        }
+      }
+
+      router.onBeforeRouteChange = () => {
+        const content = document.querySelector('.VPDoc, .VPContent')
+        if (content) {
+          content.classList.add('page-transition-leave')
+        }
+      }
+    }
+  },
+} satisfies Theme

.vitepress/theme/style.css

@@ -0,0 +1,25 @@
+/* 页面切换过渡动效 */
+.VPDoc,
+.VPContent {
+  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+}
+
+.page-transition-leave {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.page-transition-enter {
+  animation: pageEnter 0.2s ease-out;
+}
+
+@keyframes pageEnter {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}