animation au changement de page

Signed-off-by: Bacati <[email protected]>
Bacati · Oct 2, 2024 · bc2b102 · bc2b102
1 parent 8a9a834
commit bc2b102
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -1,6 +1,7 @@
 ---
 import Head, { type Props as HeadProps } from './Head.astro'
 import 'assets/pages/404/styles/style.scss'
+import { ViewTransitions } from 'astro:transitions';
 
 export interface Props extends HeadProps {
 	class?: string
@@ -12,6 +13,7 @@ export interface Props extends HeadProps {
 	<head>
 		<Head {...Astro.props} />
 		<slot name="head" />
+		<ViewTransitions />
 	</head>
 	<body class:list={["", Astro.props.class]}>
 		<slot />

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -2,6 +2,7 @@
 import Footer from 'components/layouts/Footer.astro'
 import Base, { type Props as BaseProps } from './Base.astro'
 import Header from 'components/layouts/Header.astro'
+import { fade } from 'astro:transitions'
 
 export interface Props extends BaseProps {
 	/**
@@ -14,6 +15,7 @@ export interface Props extends BaseProps {
 <Base {...Astro.props}>
 	<slot slot="head" name="head" />
 	<Header />
+	<div transition:animate={fade({ duration: '0.2s' })}>
 		<slot />
 	</div>
 	<Footer />