#Cant get transitions to work

4 messages · Page 1 of 1 (latest)

frigid quiver
#

Hi,
I have updated to astro 3.1 and im trying to get transitions to work. Im reading the documentation. I also updated chrome.
I have been trying to read the documentation but cant get it to work.

i would love to see more examples of transitions being used

This is short for what i have now.
index.astro and same for contact.astro(
´import {ViewTransitions} from 'astro:transitions';
and then in the header tag:
´<ViewTransitions />´

and in the linktag
<a href="/contact" data-astro-reload>Contact</a>

been trying with and without the data-astro-reload aswell. Im certenly missing something obvious. Thanks

surreal tundraBOT
#

Hi @frigid quiver. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

It seems like you're on the right track with implementing Astro's View Transitions. Here's a brief overview of how to use them based on the information provided in the extracts:

  1. Import the ViewTransitions component from 'astro:transitions' and add it to the <head> element of your pages. You've already done this, which is great.
---
import {ViewTransitions} from 'astro:transitions';
---
<head>
 <title>My View Transition Demo</title>
 <ViewTransitions />
</head>

(Source: Astro Blog (https://astro.build/blog/astro-3/))

  1. You can use optional transition:* directives on page elements in your .astro components for finer control over the page transition behavior during navigation. For example, transition:name, transition:animate, and transition:persist.
<aside transition:name="hero">

(Source: Astro Documentation (https://docs.astro.build/en/guides/view-transitions/))

  1. Astro comes with a few built-in animations to override the default fade transition. You can add the transition:animate directive to individual elements to customize the behavior of specific transitions. For example, fade, initial, slide, and none.
<html transition:animate="none">
 <head>
  <CommonHead />
 </head>
 <body>
  <header> ... </header>
  <main transition:animate="slide"> ... </main>
 </body>
</html>

(Source: Astro Documentation (https://docs.astro.build/en/guides/view-transitions/))

  1. If you want to enable view transitions across your entire site (SPA mode), you can add the ViewTransitions component to your common <head> or shared layout component.
# 
---import { ViewTransitions } from 'astro:transitions';---
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<ViewTransitions />

(Source: Astro Documentation (https://docs.astro.build/en/guides/view-transitions/))

  1. You can also control the fallback behavior for browsers that do not yet support the View Transition APIs by adding a fallback property on the ViewTransitions component and setting it to swap or none.
---import { ViewTransitions } from 'astro:transitions';---
<title>My site</title>
<ViewTransitions fallback="swap">

(Source: Astro Documentation (https://docs.astro.build/en/guides/view-transitions/))

Remember, the ViewTransitions component should be added to every page where you want the transitions to occur. If you're still having trouble, it might be helpful to check out some live demos (https://astro-records.pages.dev/) or read more about View Transitions in the Astro Documentation (https://docs.astro.build/en/guides/view-transitions/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: