Add support for new astro View Transitions

2023-08-06 22:05:30 -04:00
parent 0853d9ef75
commit 259580062a
3 changed files with 8 additions and 1 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -69,6 +69,10 @@ export default defineConfig({
    remarkPlugins: [readingTimeRemarkPlugin],
  },

+  experimental: {
+    viewTransitions: true,
+  },
+
  vite: {
    resolve: {
      alias: {
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,4 +1,6 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
+
 import '~/assets/styles/tailwind.css';

 import { I18N_CONFIG } from "~/utils/config";
@ -33,6 +35,7 @@ const { language, textDirection } = I18N_CONFIG;
    <Metadata {...metadata} />
    <SiteVerification />
    <Analytics />
+    <ViewTransitions />
  </head>

  <body class="antialiased text-default bg-page tracking-tight">
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@ -22,7 +22,7 @@ const { metadata } = Astro.props;
  <slot name="header">
    <Header {...headerData} isSticky showRssFeed showToggleTheme />
  </slot>
-  <main>
+  <main transition:animate="morph">
    <slot />
  </main>
  <slot name="footer">