fix(docs): add transition between docs pages, remove scrollToTop. (ep…

…icmaxco#4431)
m0ksem · Nov 18, 2024 · cadd046 · cadd046
1 parent 8844b2a
commit cadd046
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
@@ -55,9 +55,7 @@ watch(() => breakpoints.smDown, (newValue: boolean) => {
 })
 
 const { afterEach } = useRouter()
-const { scrollToElement } = useDocsScroll()
 afterEach(() => {
-  scrollToElement()
   isSidebarVisible.value = !breakpoints.smDown
   isOptionsVisible.value = false
 })
@@ -76,7 +74,7 @@ const onMouseMove = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-  scrollToElement()
+
   isSidebarVisible.value = !breakpoints.smDown
   setTimeout(() => {
     doShowLoader.value = false

diff --git a/packages/docs/pages/[page-config-category]/[page].vue b/packages/docs/pages/[page-config-category]/[page].vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-config">
-    <PageConfig
-      v-if="!isLoading && config"
+    <PageConfig 
+      v-if="!isLoading && config" 
       :page-config="config"
     />
     <PageConfigSkeleton v-else />
@@ -12,6 +12,7 @@
 import { type ConcreteBlock } from '../../modules/page-config/runtime';
 
 definePageMeta({
+  pageTransition: { name: 'page', mode: 'out-in' },
   layout: 'default',
   scrollToTop: true,
   // See: https://github.com/nuxt/nuxt/issues/13309
@@ -31,9 +32,9 @@ const tabTitlePrefix = 'Vuestic UI'
 
 const router = useRouter()
 watch(config, () => {
-  if (!config.value) {
+    if (!config.value) {
     router.push('/404')
-  }
+    }
 }, { immediate: true })
 
 watchEffect(() => {
@@ -50,6 +51,16 @@ watchEffect(() => {
 </script>
 
 <style lang="scss">
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.2s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+
 .page-config-title,
 .page-config-subtitle,
 .page-config-headline {