I´m developing a project wih AstroJs + ReactJs using the ViewTransition API of Astro. However, the transitions work perfectly in my android phone and W11 laptop but not on my W10 desktop PC. I have updated all the browsers versions to the latest, but it still doesn´t do the transitions at all, doesn´t matter if I use Edge, Opera or even Chrome.
I tried with projects of another Devs who use ViewTransitions in Astro and is the same. The transitions work on my adroid phone and W11 laptop but not on my W10 pc.
¿Is ViewTransitions not comaptible with Window 10?
I import the ViewTransitions on my Layout.astro
import { ViewTransitions } from 'astro:transitions';
Then I Use the ViewTransition Component in the Element
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro 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}</title>
<ViewTransitions />
</head>
Finally, I use the "transition:name" attribute in the elements related in both pages, the one that start the event of navigation and the one to navigate to. Both of them covered by the "Layout"
PlaylistItemCArd.astro:
---
import type { Playlist } from "@/lib/data";
interface Props {
playlist: Playlist;
}
const { playlist } = Astro.props;
const { id, albumId, title, color, cover, artists } = playlist;
---
<a
href={`/playlist/${id}`}
class="playlist-item transition-all durantion-300 flex relative p-2 overflow-hidden items-center gap-4
rounded-md hover:bg-zinc-800 shadow-lg hover:shadow-xl bg-zinc-500/30 w-44 flex-col"
transition:name=`playlist${playlist?.id}box`
>
<picture class="aspect-square w-full h-auto flex-none">
<img
src={cover}
alt={`Cover of ${title} by ${artists}`}
class="object-cover w-full h-full rounded-md"
transition:name=`playlist${playlist?.id}image`
/>
</picture>
<div
class="flex flex-auto flex-col truncate px-2"
transition:name=`playlist${playlist?.id}title`
>
<h4 class="text-white text-sm">
{title}
</h4>
<span
class="text-xs text-gray-300"
transition:name=`playlist${playlist?.id}artists`
>
{artists}
</span>
</div>
</a>
** [id].astro:**
---
import Layout from "@/layouts/Layout.astro";
import PlaylistItemCard from "@/components/PlaylistItemCard.astro";
import { allPlaylists, playlists, songs } from "@/lib/data";
const { id } = Astro.params;
const playlist = allPlaylists.find((playlist) => playlist.id === id);
const playlistSongs = songs.filter(
(song) => song.albumId === playlist?.albumId,
);
export const prerender = false;
---
<Layout title=`Playlist ${id}`>
<div
id="playlist-container"
class="relative flex flex-col h-full overflow-x-hidden bg-zin-900"
transition:name=`playlist${playlist?.id}box`
>
<header class="flex flex-row gap-8 px-6 mt-12">
<picture class="aspect-square w-52 h-52 flex-none">
<img
src={playlist?.cover}
alt={`Cover of ${playlist?.title} by ${playlist?.artists}`}
class="object-cover w-full h-full shadow-lg"
transition:name=`playlist${playlist?.id}image`
/>
</picture>
<div class="flex flex-col justify-between">
<h2 class="flex flex-1 items-end">Playlist</h2>
<div>
<h1 class="text-5xl font-bold block text-white">
{playlist?.title}
<span transition:name=`playlist${playlist?.id}title`></span>
</h1>
</div>
<div class="flex-1 flex items-end">
<div class="text-sm text-gray-300 font-normal">
<div transition:name=`playlist${playlist?.id}artists`>
<span>{playlist?.artists.join(", ")}</span>
</div>
<p class="mt-1">
<span class="text-white">{playlistSongs.length} canciones</span>,
3 h aproximadamente
</p>
</div>
</div>
</div>
</header>
<!-- <PageHeader /> -->
<div class="relative z-10 px-6 pt-10">
<!--
<Greeting />
-->
<div
class=" inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 -z-[1]"
>
</div>
</div>
<style></style>
</div>
</Layout>
Try: Windows 10: Settings > Ease of Access > Display > Show animations in Windows