diff --git a/.vitepress/theme/index.mts b/.vitepress/theme/index.mts index 4699163..252a1d6 100644 --- a/.vitepress/theme/index.mts +++ b/.vitepress/theme/index.mts @@ -1,2 +1,30 @@ +import type { EnhanceAppContext, Theme } from 'vitepress' import DefaultTheme from 'vitepress/theme' -export default DefaultTheme \ No newline at end of file +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 \ No newline at end of file diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css new file mode 100644 index 0000000..29f4b3e --- /dev/null +++ b/.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); + } +}