View Transitions -sovellusliittymä: Tasaiset sivu- ja tilamuutokset selaimessa
Mitä View Transitions -sovellusliittymä tekee, kuinka saman asiakirjan ja dokumenttien väliset siirtymät toimivat, miten niitä muotoillaan CSS:n avulla ja miten niitä käytetään vastuullisesti.
Core Takeaway
View Transitions API antaa selaimen animoida sivun kahden tilan välillä. Kutsu document.startViewTransition() funktiolla, joka päivittää DOM:n, ja selain ottaa tilannekuvia vanhasta ja uudesta näkymästä ja animoi niiden välillä, joita voit muokata ::view-transition pseudoelementeillä. Se toimii yhden sivun sovelluksissa ja tukevissa selaimissa sivujen välisissä navigaatioissa.
Miten se toimii
MDN kuvaa document.startViewTransition():n aloittavan saman asiakirjanäkymän siirtymän, joka on tyypillistä yksisivuisille sovelluksille. Selain kaappaa nykyisen näkymän, suorittaa päivityksesi, kaappaa uuden näkymän ja animoi niiden välillä. Oletuksena se on ristihäivytys; CSS antaa sinun vaihtaa sen.
Sama asiakirja ja ristiindokumentti
Saman asiakirjan siirtymät suoritetaan yhdellä sivulla, kuten SPA:issa, ja Chrome on tukenut niitä Chrome 111:stä lähtien. Asiakirjojen väliset siirtymät animoituvat eri sivujen välillä monisivuisilla sivustoilla, mikä MDN:n mukaan on ollut historiallisesti mahdotonta; he käyttävät sivunvaihto- ja pagereveal-tapahtumia sekä opt-in-toimintoa CSS:ssä. Selaimen tuki vaihtelee näiden kahden välillä, joten tarkista nykyiset yhteensopivuustaulukot.
Siirron tyylittäminen
Suurin osa mukautuksista on tavallista CSS:
- Anna elementille view-transition-name animoidaksesi sen erillään muusta sivusta, kuten pikkukuvasta, joka kasvaa sankarikuvaksi.
- Kohdista ::view-transition-old() ja ::view-transition-new() mukauttaaksesi animaatiota.
- Pidä kestot lyhyinä ja liike mielekkäänä.
- Kääri mukautetut animaatiot prefers-reduced-motion -tarkistuksiin.
Progressiivinen parannus
Tarkista aina tuki ennen kuin soitat API:lle ja päivitä DOM suoraan, jos se puuttuu. Sivun pitäisi toimia samalla tavalla ilman animaatiota. Vältä pitkiä siirtymiä navigoinnissa, mikä saa koko sivuston tuntumaan hitaammalta.
Tuotannon toteutuskatkelma
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Avain Principles muistettavat
- startViewTransition() ottaa tilannekuvia vanhoista ja uusista näkymistä ja animoi niiden välillä
- On olemassa saman asiakirjan (SPA) ja asiakirjan välisen (monisivuisen) muunnelmia
- Tyyli view-transition-name- ja ::view-transition pseudoelementeillä
- Tarkista tuki ja palaa välittömään päivitykseen
- Pidä siirtymät lyhyinä ja kunnioita vähentynyttä liikettä
Usein kysytyt kysymykset
Lähteet
- View Transition API — MDN Web Docs
- Smooth transitions with the View Transition API — Chrome kehittäjille