Skip to content

Commit

Permalink
feat: add anime when route switch
Browse files Browse the repository at this point in the history
  • Loading branch information
camera-2018 authored Nov 26, 2024
1 parent c0a97ef commit b20ec06
Showing 1 changed file with 35 additions and 3 deletions.
38 changes: 35 additions & 3 deletions .vitepress/theme/Layout.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<script setup lang="ts">
import { useData } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { nextTick, provide } from 'vue'
import { useMediumZoom } from './useMediumZoom';
import { nextTick, provide, onMounted, watch } from 'vue'
import { useMediumZoom } from './useMediumZoom'
import { useRoute } from 'vitepress/dist/client/app/router'
const { isDark } = useData()
const enableTransitions = () =>
'startViewTransition' in document &&
Expand Down Expand Up @@ -38,6 +40,21 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: { clientX: numbe
})
onMounted(() => {
watch(() => route.path, async () => {
if (!enableTransitions()) return
const contentContainer = document.querySelector('.content-container') as HTMLElement
if (contentContainer) {
contentContainer.classList.add('fly-in')
await nextTick()
setTimeout(() => {
contentContainer.classList.remove('fly-in')
}, 300)
}
})
})
useMediumZoom()
</script>

Expand Down Expand Up @@ -72,6 +89,21 @@ useMediumZoom()
z-index: 9999;
}
@keyframes flyIn {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.content-container.fly-in {
animation: flyIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.VPSwitchAppearance {
width: 22px !important;
}
Expand Down Expand Up @@ -197,4 +229,4 @@ useMediumZoom()
animation: none;
}
}
</style>
</style>

0 comments on commit b20ec06

Please sign in to comment.