kirigaya/openmcp-document
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add some animation

Browse Source
This commit is contained in:
锦恢 2025-06-05 04:19:07 +08:00
parent 48b60b059d
commit 644d537ec3
4 changed files with 544 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
.vitepress/config.mts.timestamp-1749066931248-ef28b5e1119c7.mjs Normal file
View File

File diff suppressed because one or more lines are too long

19
.vitepress/theme/Layout.vue
View File

@ -1,23 +1,21 @@
<template> <template>
<DefaultTheme.Layout id="k-layout"> <DefaultTheme.Layout id="k-layout">
</DefaultTheme.Layout> </DefaultTheme.Layout>
<ScrollBar /> <ClientOnly>
<ScrollBar v-if="mounted" />
</ClientOnly>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useData, useRouter } from 'vitepress'; import { useData, useRouter } from 'vitepress';
import DefaultTheme from 'vitepress/theme'; import DefaultTheme from 'vitepress/theme';
import { nextTick, onMounted, provide } from 'vue'; import { nextTick, onMounted, provide, ref } from 'vue';
import mediumZoom from "medium-zoom"; import mediumZoom from "medium-zoom";
import { animateIn, animateOut } from './hook/animate'; import { animateIn, animateOut } from './hook/animate';
import ScrollBar from './components/scrollbar/index.vue'; import ScrollBar from './components/scrollbar/index.vue';
import { gsap } from "gsap"; import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
// 注册插件
gsap.registerPlugin(ScrollTrigger);
const data = useData() const data = useData()
const router = useRouter() const router = useRouter()
@ -26,7 +24,7 @@ const enableTransitions = () =>
window.matchMedia('(prefers-reduced-motion: no-preference)').matches; window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
const isDark = data.isDark; const isDark = data.isDark;
const mounted = ref(false);
const setupMediumZoom = () => { const setupMediumZoom = () => {
mediumZoom("[data-zoomable]", { mediumZoom("[data-zoomable]", {
@ -141,8 +139,9 @@ function makeHomeAnimation() {
} }
onMounted(() => { onMounted(() => {
mounted.value = true;
setupMediumZoom(); setupMediumZoom();
gsap.registerPlugin(ScrollTrigger);
makeHomeAnimation(); makeHomeAnimation();
}); });
</script> </script>