View Transitions Next.js:ssä: sivuanimaatiot ilman kirjastoa

View Transitions API ottaa tempun sinulta ja antaa sen selaimelle. Sen sijaan että pitäisit kaksi elävää DOM-puuta muistissa ja mittailisit niitä, selain ottaa kuvan vanhasta tilasta, päivittää DOM:n, ottaa kuvan uudesta tilasta ja animoi näiden kahden kuvan välillä — compositoreilla.

javascript

function navigate(update) {
if (!document.startViewTransition) {
  update(); // ei tukea: päivitä vain, ei animaatiota
  return;
}

document.startViewTransition(() => update());
}

css

::view-transition              /* koko sivun kattava peitto */
::view-transition-group(name)      /* animoi kokoa ja sijaintia */
  ::view-transition-image-pair(name)
    ::view-transition-old(name)    /* "ennen"-tilannekuva */
    ::view-transition-new(name)    /* "jälkeen"-tilannekuva */

Se mikä yllättää kaikki: tilannekuva on valokuva, ei elementti

::view-transition-old ei ole vanha elementtisi pienennettynä. Se on staattinen kuva siitä. <video> jäätyy yhteen ruutuun. Latausindikaattori lopettaa pyörimisen. 200ms:lla tällä ei ole merkitystä. 1000ms:lla se on ilmeistä.

Nimeäminen: koko sopimus

css

.card-image {
view-transition-name: hero;
}

::view-transition-group(hero) {
animation-duration: 400ms;
animation-timing-function: ease-in-out;
}

Kova sääntö: view-transition-name:n täytyy olla ainutlaatuinen dokumentissa milloin tahansa.

React 19.2 ja Next.js 16: yksi komponentti

tsx

import { ViewTransition } from "react";
import Image from "next/image";
import Link from "next/link";

export function ProjectCard({ project }) {
return (
  <Link href={"/projects/" + project.slug}>
    <ViewTransition name={"project-" + project.slug}>
      <Image src={project.cover} alt={project.title} />
    </ViewTransition>
  </Link>
);
}

share ja default="none" täytyy kulkea yhdessä. default="none":lla ilman share-proppia nimetty pari lakkaa äänettömästi morphaamasta.

Suunta: kerro käyttäjälle mihin suuntaan he menivät

tsx

<Link href="/projects/runvalis" transitionTypes={["nav-forward"]}>
Runvalis
</Link>

<ViewTransition
enter={{ "nav-forward": "slide-in", "nav-back": "slide-out", default: "none" }}
exit={{ "nav-forward": "slide-out", "nav-back": "slide-in", default: "none" }}
default="none"
>
<main>{children}</main>
</ViewTransition>

Versio ilman kehystä

css

@view-transition {
navigation: auto;
}

Sudenkuopat ja parhaat käytännöt

• Kohtele aina progressiivisena parannuksena.
• Virheenetsintä hidastettuna.
• Kunnioita prefers-reduced-motion-asetusta.
• Peitto syö klikkauksia oletuksena.
• Tilannekuvat maksavat muistia.
• Kiinnitä otsikko.
• View transition on näkymätön apuvälineille.

Yhteenveto

View Transitions on sama argumentti sovellettuna navigointiin: sen sijaan että ajaisit FLIPiä käsin, ilmoitat mikä yhdistää kaksi tilaa ja annat selaimen piirtää yhteyden kahdesta valokuvasta.