Earlier, achieving a smooth transition while navigating on the web was challenging. We had to juggle SPA, JavaScript, and CSS, which made compatibility, performance, and accessibility seem unattainable. Thankfully, with the new Native Browser API View Transitions and the Astro implementation, this process is now effortless. Astro takes care of the heavy lifting, reducing the CSS and JavaScript overhead and offering true navigation via Multi Page Application (MPA).
In this guide, we’ll walk through building a basic shop, taking advantage of this technique to ensure smooth transitions between pages.
Getting started
Cloning the GitHub repository
If you’re eager to get started, check out the Github repository.
Step-by-step
Begin by creating an Astro project using its installer. If you encounter any issues or have questions, the Astro Installation Guide has all the answers.
# Using NPM
npm create astro@latest
# Using Yarn
yarn create astro
# Using PNPM
pnpm create astro@latest
During installation, the installer will prompt you for some settings. Choose the Empty project option as your starting point.
Understanding the Folder Structure
components: This folder contains various components like buttons, cards, etc.
layouts: Here, we store shared page layouts.
pages: This folder contains pages, and navigation is based on file-based routing. Discover more about this in the Astro Routing Guide.
Astro supports a variety of UI frameworks such as React, Vue, Svelte, and more. For this demonstration, we’ll use the Astro Syntax to create our components. These files have an .astro extension and combine HTML, CSS, and JS.
Integrating TailwindCSS
We’ll utilize TailwindCSS for styling in this project. Use the Astro CLI to incorporate it:
# Using NPM
npx astro add tailwind
# Using Yarn
yarn astro add tailwind
# Using PNPM
pnpm astro add tailwind
Products Data
For this example, we will be using a data set of Products that contains some sport shoes and shirts, but feel free to use any data you want. We will place these images in the /publics folder since they are already optimized for the web. By default, Astro will not optimize images in the public’s folder. If you want Astro to optimize them, you should put them in the /src folder or configure it. Learn more about Astro Image Optimization.
Add an icon library
In this example, we will use astro-icon for the page icons.
# Using NPM
npm i astro-icon
# Using Yarn
yarn add astro-icon
# Using PNPM
pnpm add astro-icon
Running the project
# Using NPM
npm run dev
# Using Yarn
yarn dev
# Using PNPM
pnpm dev
You’ll see a blank page.
Layout and Design
First, create an overall layout for the pages. It will be located under src/layouts/Layout.astro. Astro defaults render the page statically during build time, so at the top of the page, we see three dashes — that separate the JavaScript that will be executed during build time (or during the request time for SSR, for example) from the rest of the page.
import { ViewTransitions } from “astro:transitions”;
interface Props {
title: string;
description?: string;
}
const { title, description = “A simple Shop built in Astro using View Transitions and TailwindCSS” } = Astro.props;
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”description” content={description} />
<meta name=”viewport” content=”width=device-width” />
<link rel=”icon” type=”image/svg+xml” href=”/favicon.svg” />
<meta name=”generator” content={Astro.generator} />
<title>{title} – Astro Transitions Shop</title>
<ViewTransitions />
</head>
<body>
<main class=”relative max-w-6xl min-h-screen mx-auto py-6 lg:pt-10 px-4 pb-20″ >
<slot />
</main>
<style is:global>
:root {
}
body {
background-color: theme(colors.gray.50);
}
.animate-in {
animation: animate-in 0.5s ease-in-out;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #c7c7c7 #ededed;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 15px;
}
*::-webkit-scrollbar-track {
background: #ededed;
}
*::-webkit-scrollbar-thumb {
background-color: #c7c7c7;
border-radius: 5px;
border: 2px solid #ffffff;
}
@keyframes animate-in {
0% {
opacity: 0;
transform: translateY(1rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
</body>
</html>
To use View Transitions, we need to import and place the <ViewTransitions /> component within the <head> section of the layout we want to use.
Source link
