feat(blog): add blog pages transitions

bitterteriyaki · Sep 8, 2024 · a28ebc2 · a28ebc2
1 parent b8e33ef
commit a28ebc2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,4 @@ logs
 !.env.example
 
 .husky/_/
+.vscode/
diff --git a/app.vue b/app.vue
@@ -2,7 +2,6 @@
   <NuxtLayout>
     <NuxtPage />
     <SpeedInsights />
-
     <UNotifications />
   </NuxtLayout>
 </template>

diff --git a/assets/css/main.sass b/assets/css/main.sass
@@ -1,3 +1,24 @@
 .dark 
   @apply bg-slate-950
   @apply text-slate-100
+
+.page-enter-active,
+.page-leave-active
+  @apply transition-all
+  @apply duration-300
+
+.page-leave-to,
+.page-enter-from
+  @apply opacity-0
+
+.page-enter-active
+  @apply ease-out
+
+.page-leave-active
+  @apply ease-in
+
+.page-leave-to
+  @apply -translate-y-6
+
+.page-enter-from
+  @apply translate-y-6
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -8,9 +8,8 @@ export default defineNuxtConfig({
     { path: '@/components/content', pathPrefix: true },
   ],
   app: {
-    head: {
-      htmlAttrs: { lang: 'en' },
-    },
+    head: { htmlAttrs: { lang: 'en' } },
+    pageTransition: { name: 'page', mode: 'out-in' },
   },
   modules: [
     '@nuxt/ui',