Rammeverk som Astro, Vue og Svelte har innebygde muligheter til å automatisk få fine overganger når brukeren navigerer mellom ulike sider, eller elementer, på en side.

Noe tilsvarende har manglet i React, til tross for at nettlesere (med unntak av Firefox) lenge har hatt støtte for såkalte View Transitions.

Dermed har man enten vært nødt til å lage noe selv eller bruke tredjeparts animasjonsbiblioteker som for eksempel Motion for React (tidligere Framer Motion).

Nå ser det imidlertid ut til at også React og Next.js vil få støtte for View Transitions snart, etter at Sebastian Markbåge på Reacts kjerneteam for noen dager siden gjorde en pull request som gir støtte for View Transitions.

– View Transitions er praktisk talt magi! skriver Markbåge.

Det var Matt Perry i Motion.dev-bloggen som meldte om dette først.

Slik virker View Transitions

Mens det å få til animasjoner mellom elementer på en side eller når man navigerer fra én side til en annen vanligvis har krevd litt innsats, er poenget med View Transitions at det går mer eller mindre automatisk.

Med View Transitions kan du blant annet:

• Når du navigerer til en ny side i en MPA (Multi-Page App) kan den nye siden fade inn – eller "slide" – over den gamle
• I et bildegalleri kan bilder automatisk animeres så de blir store når du klikker på dem
• Du kan animere UI-elementer på siden, for eksempel ved å bytte ut et element med et annet og fade inn det nye elementet, eller ved å animere fra én posisjon til en annen uten at du må lage animasjonen selv.

Du kan også animere mellom ting som ikke har vært mulig å animere mellom tidligere, som for eksempel når justify-content endres fra flex-start til flex-end. Praktisk for eksempel for å navigere knapper. Motion.dev har laget noen fine eksempler – med kode – på denne siden.

Enkelt å bruke

View Transitions i React er som nevnt eksperimentelt foreløpig, og API-et kan derfor komme til å endres. Dermed bør du ikke bruke det i produksjon ennå.

Alt du trenger å gjøre for å bruke View Transitions, er å wrappe en komponent med <ViewTransition> slik:

import {ViewTransition} from 'react';

<ViewTransition>
   <Component />
</ViewTransition>

Da vil du få en overgang i det denne komponenten rendres.

Du kan også automatisk "cross-fade" mellom to komponenter basert på en tilstand slik:

<ViewTransition>
   {condition ? <ComponentA /> : <ComponentB />}
</ViewTransition>

Prøv det selv

Den aller enkleste måten å prøve det ut på er å forke en CodeSandbox Motion.dev har laget her.

Hvis du vil teste det "på ordentlig", kan du installere en eksperimentell versjon av React slik:

npm install react@experimental react-dom@experimental

Bruker du Next.js må du installere en canary-versjon av Next.js med minst versjon 15.2.0-canary.6. Og så må du legge til følgende i next.config-filen:

const nextConfig = {
    experimental: {
        viewTransition: true,
    },
}

Og så må du importere ViewTransition på denne måten:

import { unstable_ViewTransition as ViewTransition } from "react"

View Transitions blir neppe slutten for tredjeparts animasjonsbiblioteker, men det vil definitivt gjøre det enklere å lage både nettsider og web-apper som ser bra ut – med minimal innsats.

Få også med deg hva som er nytt i Astro 5 – som var tidlig ute med støtte for View Transitions:

Her er nyhetene i det ferske, populære rammeverket

onsdag 4. desember 2024