Thiết kế website giá rẻ

Question

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>

Thiết kế website giá rẻ

Danh mục

Astro ViewTransition doesn´t work in Windows 10 device