perf: optimize the animation effects of the document content

Author: hacxy

packages/demo/posts/markdown-examples.md

@@ -89,3 +89,7 @@ This is a details block.
 ## More
 
 Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
+
+ssss
+
+dddddddddd

packages/theme/index.ts

@@ -6,6 +6,7 @@ import { MotionPlugin } from '@vueuse/motion';
 import { NImage, NImageGroup } from 'naive-ui';
 import VPTheme from 'vitepress/theme';
 import BlogPage from './src/client/components/BlogPage.vue';
+import ContentWrapper from './src/client/components/ContentWrapper.vue';
 import DocsHeaderInfo from './src/client/components/DocsHeaderInfo.vue';
 import Layout from './src/client/components/Layout.vue';
 import Tags from './src/client/components/Tags.vue';
@@ -37,6 +38,11 @@ const MildTheme: Theme = {
     }
 
     if (!(import.meta as any).env.SSR) {
+      if (!(import.meta as any).env.DEV) {
+        setTimeout(() => {
+          window.scrollTo(0, 0);
+        }, 300);
+      }
       if ((import.meta as any).hot) {
         let scrollPosition = 0;
         // 监听热模块替换之前的事件
@@ -73,6 +79,7 @@ const MildTheme: Theme = {
     app.component('DocsHeaderInfo', DocsHeaderInfo);
     app.component('Image', NImage);
     app.component('ImageGroup', NImageGroup);
+    app.component('ContentWrapper', ContentWrapper);
   }
 };
 export { Layout };

packages/theme/package.json

@@ -53,6 +53,7 @@
     "simple-git": "^3.27.0",
     "tinyglobby": "^0.2.10",
     "typed.js": "^2.1.0",
+    "unocss": "^65.4.2",
     "vitepress-plugin-group-icons": "^1.3.2",
     "vitepress-plugin-rss": "^0.3.0",
     "vue": "^3.4.21"

packages/theme/src/client/components/BlogPage.vue

@@ -52,7 +52,22 @@ router.onBeforeRouteChange = to => {
       <div class="VMArticlesListWrapper">
         <ArticlesList :list-data="posts" :title="articleTitle" />
       </div>
-      <NPagination v-if="totalPages" v-model:page="currentPage" :page-count="totalPages" />
+      <NPagination
+        v-if="totalPages"
+        v-model:page="currentPage"
+        v-motion
+        :initial="{
+          opacity: 0,
+        }"
+        :enter="{
+          opacity: 1,
+          transition: {
+            duration: 500,
+            delay: pageSize * 200,
+          },
+        }"
+        :page-count="totalPages"
+      />
     </div>
   </div>
 </template>

packages/theme/src/client/components/ContentWrapper.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+const classes = { 'slide-enter-content': !((import.meta as any).env.DEV) };
+</script>
+
+<template>
+  <div class="vm-content-wrapper" :class="classes">
+    <slot />
+  </div>
+</template>

packages/theme/src/client/components/Layout.vue

@@ -12,6 +12,7 @@ import LocalNav from './LocalNav.vue';
 import Sidebar from './Sidebar.vue';
 
 import('virtual:group-icons.css');
+import('virtual:uno.css');
 
 // Init data 不要在其他任何地方调用这个hook 否则会存在性能浪费问题
 const { np } = useInitData();

packages/theme/src/client/styles/index.scss

@@ -117,3 +117,103 @@
     background: var(--vp-c-brand); /* 修改进度条的颜色 */
   }
 }
+
+@keyframes slide-enter {
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 100;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [slide-enter],
+  .slide-enter,
+  .slide-enter-content > * {
+    --enter-stage: 0;
+    --enter-step: 150ms;
+    --enter-initial: 0ms;
+    animation: slide-enter 1s both 1;
+    animation-delay: calc(var(--enter-initial) + var(--enter-stage) * var(--enter-step));
+  }
+
+  .slide-enter-content > *:nth-child(1) {
+    --enter-stage: 1;
+  }
+  .slide-enter-content > *:nth-child(2) {
+    --enter-stage: 2;
+  }
+  .slide-enter-content > *:nth-child(3) {
+    --enter-stage: 3;
+  }
+  .slide-enter-content > *:nth-child(4) {
+    --enter-stage: 4;
+  }
+  .slide-enter-content > *:nth-child(5) {
+    --enter-stage: 5;
+  }
+  .slide-enter-content > *:nth-child(6) {
+    --enter-stage: 6;
+  }
+  .slide-enter-content > *:nth-child(7) {
+    --enter-stage: 7;
+  }
+  .slide-enter-content > *:nth-child(8) {
+    --enter-stage: 8;
+  }
+  .slide-enter-content > *:nth-child(9) {
+    --enter-stage: 9;
+  }
+  .slide-enter-content > *:nth-child(10) {
+    --enter-stage: 10;
+  }
+  .slide-enter-content > *:nth-child(11) {
+    --enter-stage: 11;
+  }
+  .slide-enter-content > *:nth-child(12) {
+    --enter-stage: 12;
+  }
+  .slide-enter-content > *:nth-child(13) {
+    --enter-stage: 13;
+  }
+  .slide-enter-content > *:nth-child(14) {
+    --enter-stage: 14;
+  }
+  .slide-enter-content > *:nth-child(15) {
+    --enter-stage: 15;
+  }
+  .slide-enter-content > *:nth-child(16) {
+    --enter-stage: 16;
+  }
+  .slide-enter-content > *:nth-child(17) {
+    --enter-stage: 17;
+  }
+  .slide-enter-content > *:nth-child(18) {
+    --enter-stage: 18;
+  }
+  .slide-enter-content > *:nth-child(19) {
+    --enter-stage: 19;
+  }
+  .slide-enter-content > *:nth-child(20) {
+    --enter-stage: 20;
+  }
+  .slide-enter-content > *:nth-child(21) {
+    --enter-stage: 21;
+  }
+  .slide-enter-content > *:nth-child(22) {
+    --enter-stage: 22;
+  }
+  .slide-enter-content > *:nth-child(23) {
+    --enter-stage: 23;
+  }
+  .slide-enter-content > *:nth-child(24) {
+    --enter-stage: 24;
+  }
+  .slide-enter-content > *:nth-child(25) {
+    --enter-stage: 25;
+  }
+}

packages/theme/src/client/vite-env.d.ts

@@ -8,3 +8,4 @@ declare module '*.vue' {
 
 declare module '*.svg';
 declare module 'virtual:group-icons.css'
+declare module 'virtual:uno.css'

packages/theme/src/node/index.ts

@@ -1,6 +1,7 @@
 import type { DefaultTheme, Plugin, RawConfigExports, SiteConfig } from 'vitepress';
 import { fileURLToPath } from 'node:url';
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash';
+import UnoCSS from 'unocss/vite';
 import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';
 import { RssPlugin } from 'vitepress-plugin-rss';
 import { NOT_ARTICLE_LAYOUTS } from '../shared/constants';
@@ -55,7 +56,8 @@ const baseConfig: RawConfigExports<DefaultTheme.Config> = {
     },
     plugins: [
       groupIconVitePlugin(),
-      rss()
+      rss(),
+      UnoCSS()
     ],
     build: {
       chunkSizeWarningLimit: 2048

packages/theme/src/node/plugins/markdown.ts

@@ -31,7 +31,7 @@ export const imgToImage: PluginSimple = md => {
   };
   md.renderer.render = (...args) => {
     const content = defaultRender.apply(md.renderer, args);
-    return `<ImageGroup>${content}</ImageGroup>`;
+    return `<ImageGroup><ContentWrapper>${content}</ContentWrapper></ImageGroup>`;
   };
 };