CSS View Transition API: Ülim juhend sujuva lehe navigeerimise rakendamiseks

Aastakümneid on veebinavigeerimist määratlenud häiriv reaalsus: tühi valge ekraan. Lingile klõpsamine tähendas lehe täielikku uuesti laadimist, hetkelist tühjust ja seejärel uue sisu järsku ilmumist. Kuigi see oli funktsionaalne, puudub sellel kogemusel vedelus ja viimistletus, mida kasutajad on oodanud natiivrakendustelt. Ühe lehe rakendused (SPAd) ilmusid lahendusena, kasutades keerukaid JavaScripti raamistikke sujuvate üleminekute loomiseks, kuid sageli arhitektuurilise lihtsuse ja esialgse laadimise jõudluse arvelt.

Mis siis, kui me saaksime mõlema maailma parima? Mitme lehe rakenduse (MPA) lihtne, serveriga renderdatud arhitektuur koos SPA elegantsete ja sisukate üleminekutega. See on CSS View Transition API lubadus, murranguline brauseri funktsioon, mis on valmis muutma seda, kuidas me mõtleme ja ehitame kasutajakogemusi veebis.

See põhjalik juhend viib teid sügavale View Transition API-sse. Uurime, mis see on, miks see on monumentaalne nihe veebiarenduses ja kuidas saate seda täna rakendada – nii SPA-de kui ka, mis veelgi põnevam, traditsiooniliste MPA-de puhul. Olge valmis hüvasti ütlema valgele välgule ja tere uuele ajastule sujuvas veebinavigeerimises.

Mis on CSS View Transition API?

CSS View Transition API on mehhanism, mis on otse veebiplatvormi sisse ehitatud ja mis võimaldab arendajatel luua animeeritud üleminekuid erinevate DOM-i (Document Object Model) olekute vahel. Põhimõtteliselt pakub see lihtsat viisi visuaalse muudatuse haldamiseks ühest vaatest teise, olenemata sellest, kas see muutus toimub samal lehel (SPA-s) või kahe erineva dokumendi vahel (MPA-s).

Protsess on märkimisväärselt nutikas. Kui üleminek käivitub, siis brauser:

1. Võtab hetkeseisust "ekraanipildi" (vana vaade).
2. Võimaldab teil DOM-i uuele olekule uuendada.
3. Võtab uue lehe olekust "ekraanipildi" (uus vaade).
4. Asetab vana vaate ekraanipildi uue, reaalajas vaate peale.
5. Animeerib ülemineku kahe vahel, tavaliselt sujuva ristuvadustamise abil vaikimisi.

Kogu seda protsessi korraldab brauser, muutes selle väga tõhusaks. Veelgi olulisem on see, et see annab arendajatele täieliku kontrolli animatsiooni üle, kasutades tavapärast CSS-i, muutes keeruka JavaScripti ülesande deklaratiivseks ja juurdepääsetavaks kujundusprobleemiks.

Miks see on veebiarenduses mängumuutja

Selle API kasutuselevõtt ei ole lihtsalt järjekordne täiendus; see esindab fundamentaalset paranemist veebiplatvormil. Siin on põhjus, miks see on nii oluline arendajatele ja kasutajatele kogu maailmas:

• Oluliselt täiustatud kasutajakogemus (UX): Siledad üleminekud ei ole lihtsalt kosmeetilised. Need tagavad visuaalse järjepidevuse, aidates kasutajatel mõista erinevate vaadete vahelist suhet. Element, mis sujuvalt kasvab pisipildist täissuuruses pildiks, pakub konteksti ja suunab kasutaja tähelepanu, muutes liidese intuitiivsemaks ja reageerivamaks.
• Massiivselt lihtsustatud arendus: Enne seda API-t nõudsid sarnaste efektide saavutamine raskeid JavaScripti teeke (nagu Framer Motion või GSAP) või keerulisi CSS-in-JS-i lahendusi. View Transition API asendab selle keerukuse lihtsa funktsioonikõne ja mõne rea CSS-iga, vähendades takistust ilusate, rakendusesarnaste kogemuste loomisel.
• Suurepärane jõudlus: Animatsiooniloogika delegeerimisega brauseri renderdusmootorile võivad vaateüleminekud olla jõudluselt paremad ja aku tõhusamad kui nende JavaScript-põhised vasted. Brauser saab protsessi optimeerida viisidel, mida on käsitsi raske korrata.
• SPA-MPA vahelise lõhe ületamine: Võib-olla kõige põnevam aspekt on selle tugi dokumentidevahelistele üleminekutele. See võimaldab traditsioonilistel, serveri poolt renderdatud veebisaitidel (MPAd) võtta kasutusele sujuva navigeerimise, mida on pikka aega peetud ainult SPA-deks. Ettevõtted saavad nüüd täiustada oma olemasolevaid veebisaite kaasaegsete UX-mustritega, tegemata kulukat ja keerulist arhitektuurilist migratsiooni täielikku SPA-raamistikku.

Põhikontseptsioonid: Vaateüleminekute taga peituva maagia mõistmine

API valdamiseks peate kõigepealt mõistma selle kahte põhikomponenti: JavaScripti pääsupunkti ja CSS-i pseudo-elemendi puu, mis võimaldab kohandamist.

JavaScripti sisenemispunkt: `document.startViewTransition()`

Kõik algab ühest JavaScripti funktsioonist: `document.startViewTransition()`. See funktsioon võtab argumendina tagasihelistamise. Selles tagasihelistamises teete kõik DOM-i manipulatsioonid, mis on vajalikud vana olekust uude olekusse jõudmiseks.

Tüüpiline kõne näeb välja selline:

// Esiteks kontrollige, kas brauser toetab API-t
if (!document.startViewTransition) {
  // Kui pole toetatud, uuendage DOM-i otse
  updateTheDOM();
} else {
  // Kui toetatud, mähkige DOM-i värskendus üleminekufunktsiooni
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

Kui kutsute `startViewTransition`, alustab brauser varem kirjeldatud püüdmise-uuenduse-animeerimise jada. Funktsioon tagastab objekti `ViewTransition`, mis sisaldab lubadusi, mis võimaldavad teil konksida ülemineku elutsükli erinevatesse etappidesse täpsemaks juhtimiseks.

CSS-i pseudo-elemendi puu

Kohandamise tõeline jõud peitub spetsiaalses CSS-i pseudo-elementide komplektis, mille brauser loob ülemineku ajal. See ajutine puu võimaldab teil vana ja uut vaadet iseseisvalt kujundada.

• ::view-transition: Puu juur, mis katab kogu vaateala. Saate seda kasutada taustavärvi või ülemineku kestuse määramiseks.
• ::view-transition-group(name): Tähistab üksikut üleminevat elementi. See vastutab elemendi positsiooni ja suuruse eest animatsiooni ajal.
• ::view-transition-image-pair(name): konteiner elemendi vanale ja uuele vaatele. See on kujundatud eraldava `mix-blend-mode`'na.
• ::view-transition-old(name): Elemendi ekraanipilt selle vanas olekus (nt pisipilt).
• ::view-transition-new(name): Elemendi reaalajas esitus selle uues olekus (nt täissuuruses pilt).

Vaikimisi on selles puus ainus element `root`, mis tähistab kogu lehekülge. Konkreetsete elementide animeerimiseks olekute vahel peate neile andma ühtlase `view-transition-name`.

Praktiline rakendamine: teie esimene vaateüleminek (SPA näide)

Loome levinud UI mustri: kaartide loend, mis klõpsamisel viib samal lehel detailvaatesse. Võti on ühise elemendi olemasolu, näiteks pilt, mis muutub sujuvalt kahe oleku vahel.

1. samm: HTML-i struktuur

Meil on vaja konteinerit meie loendi jaoks ja konteinerit detailvaate jaoks. Lülitame klassi vanemelementidel sisse ja välja, et näidata ühte ja peita teist.

<div id="app-container">
  <div class="list-view">
    <!-- Kaart 1 -->
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="Item 1">
      <h3>Toode üks</h3>
    </div>
    <!-- Rohkem kaarte... -->
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="Item 1">
    <h1>Toode üks</h1>
    <p>Siin on üksikasjalik kirjeldus...</p>
    <button id="back-button">Tagasi</button>
  </div>
</div>

2. samm: määrake `view-transition-name`

Selleks, et brauser mõistaks, et pisipildi pilt ja detailvaate pilt on *sama kontseptuaalne element*, peame andma neile CSS-is sama `view-transition-name`. See nimi peab olema unikaalne iga ülemineva elemendi jaoks lehel antud ajahetkel.

.card.active img {
  view-transition-name: product-image;
} .detail-view.active img {
  view-transition-name: product-image;
}

Me kasutame `.active` klassi, mille lisame JavaScriptiga, et tagada ainult nähtavate elementide määramine nimega, vältides konflikte.

3. samm: JavaScripti loogika

Nüüd kirjutame funktsiooni, mis haldab DOM-i värskendust ja mähime selle funktsiooni `document.startViewTransition()`.

function showDetailView(itemId) {
  const updateDOM = () => {
    // Lisage "active" klass õigele kaardile ja detailvaatele
    // See määrab ka CSS-i kaudu view-transition-name'i
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // Peida loend ja näita detailvaadet
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

Ainult sellega klõpsab kaardil, mis käivitab sujuva morfimisanimatsiooni pildi jaoks ja ristuva tuhmumise ülejäänud lehe jaoks. Keerukat animatsiooniajakava ega teeki pole vaja.

Järgmine piir: dokumentidevahelised vaateüleminekud MPA-dele

Siin muutub API tõeliselt transformatiivseks. Nende sujuvate üleminekute rakendamine traditsioonilistele mitme lehe rakendustele (MPA-dele) oli varem võimatu ilma neid SPA-deks muutmata. Nüüd on see lihtne sisselülitus.

Dokumentidevaheliste üleminekute lubamine

Üleminekute lubamiseks erinevate lehtede vahel navigatsioonideks lisate lihtsa CSS-i at-reegli mõlema allika- ja sihtlehe CSS-ile:

@view-transition {
  navigation: auto;
}

See on kõik. Kui see reegel on olemas, kasutab brauser automaatselt vaateüleminekut (vaikimisi ristuvaduse) kõigi sama päritoluga navigatsioonide jaoks.

Võti: järjepidev `view-transition-name`

Nagu SPA näites, sõltub elementide ühendamise maagia kahe eraldi lehe vahel jagatud, unikaalsest `view-transition-name'ist`. Kujutleme toodete loendi lehte (`/products`) ja toote detailide lehte (`/products/item-1`).

Lehel `products.html`:

<a href="/products/item-1">
  <img src="thumbnail-1.jpg" style="view-transition-name: product-image-1;">
</a>

Lehel `product-detail.html`:

<div class="hero">
  <img src="large-1.jpg" style="view-transition-name: product-image-1;">
</div>

Kui kasutaja klõpsab esimesel lehel linki, näeb brauser elementi `view-transition-name: product-image-1`, mis lahkub lehelt. Seejärel ootab ta uue lehe laadimist. Kui teine ​​leht renderdatakse, leiab see elemendi sama `view-transition-name'iga ja loob automaatselt sujuva morfimisanimatsiooni kahe vahel. Ülejäänud lehe sisu vaikeväärtus on peen rist-fade. See loob kiiruse ja järjepidevuse tajumise, mis oli varem MPA-de jaoks mõeldamatu.

Täiustatud tehnikad ja kohandused

Vaikimisi ristuvadumise on elegantne, kuid API pakub sügavaid kohandamiskonksusid CSS-animatsioonide kaudu.

Animatsioonide kohandamine CSS-iga

Saate tühistada vaikeanimatsioonid, sihtides pseudo-elemente standardsete CSS `@keyframes` ja `animation` atribuutidega.

Näiteks uue lehe sisu jaoks "paremalt sisse libisemise" efekti loomiseks:

@keyframes slide-from-right {
  from { transform: translateX(100%); }
} ::view-transition-new(root) {
  animation: slide-from-right 0.5s ease-out;
}

Saate rakendada erinevaid animatsioone `::view-transition-old` ja `::view-transition-new` erinevatele elementidele, et luua väga koreograafilisi ja keerukaid üleminekuid.

Ülemineku tüüpide juhtimine klassidega

Levinud nõue on omada erinevaid animatsioone edasi- ja tagasisuunaliseks navigeerimiseks. Näiteks võib edasisuunaline navigeerimine libistada uue lehe paremalt sisse, samas kui tagasisuunaline navigeerimine libistab selle vasakult sisse. Seda saab saavutada, lisades klassi dokumendi elemendile (``) vahetult enne ülemineku käivitamist.

JavaScript "tagasi" nupu jaoks:

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // Loogika tagasi navigeerimiseks
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

CSS erinevate animatsioonide määratlemiseks:

/* Vaikimisi edasisuunaline animatsioon */
::view-transition-new(root) {
  animation: slide-from-right 0.5s;
} /* Tagasisuunaline animatsioon */
.is-going-back::view-transition-new(root) {
  animation: slide-from-left 0.5s;
}

See võimas muster pakub graanulipõhist kontrolli kasutaja navigeerimiskogemuse üle.

Juurdepääsetavuse kaalutlused

Kaasaegne veebi API oleks puudulik ilma tugeva juurdepääsetavuseta, ja View Transition API pakub seda.

• Kasutajate eelistuste austamine: API austab automaatselt meediapäringut `prefers-reduced-motion`. Kui kasutaja on märkinud, et ta eelistab oma operatsioonisüsteemi seadetes vähem liikumist, vahele üleminek ja DOM-i värskendus toimub koheselt. See juhtub vaikimisi ilma arendajalt täiendavat tööd nõudmata.
• Fookuse säilitamine: Üleminekud on puhtalt visuaalsed. Need ei häiri tavalist fookuse haldamist. Arendaja vastutab ka selle eest, et pärast üleminekut viiakse klaviatuuri fookus loogilisele elemendile uues vaates, näiteks põhiteema või esimese interaktiivse elemendi juurde.
• Semantiline HTML: API on täiustuskiht. Teie aluseks olev HTML peaks jääma semantiliseks ja juurdepääsetavaks. Kasutaja ekraanilugejaga või mitte toetava brauseriga kogeb sisu ilma üleminekuta, seega peab struktuur olema iseenesest mõistetav.

Brauseri tugi ja progressiivne täiustamine

2023. aasta lõpu seisuga on View Transition API SPA-de jaoks toetatud Chromium-põhistes brauserites (Chrome, Edge, Opera). Dokumentidevahelised üleminekud MPA-de jaoks on saadaval funktsioonilippu taga ja neid arendatakse aktiivselt.

API loodi algusest peale progressiivse täiustamise jaoks. Varem kasutatud valvemuster on võtmetähtsusega:

if (!document.startViewTransition) { ... }

See lihtne kontroll tagab, et teie kood üritab luua ülemineku ainult brauserites, mis seda toetavad. Vanemates brauserites toimub DOM-i värskendus koheselt, nagu see alati on olnud. See tähendab, et saate hakata API-t kasutama juba täna, et täiustada kasutajakogemust kaasaegsetes brauserites, ilma negatiivse mõjuta neile, kellel on vanemad. See on kasu-kõigile stsenaarium.

Veebinavigeerimise tulevik

View Transition API on midagi enamat kui lihtsalt silmapaistvate animatsioonide vahend. See on fundamentaalne nihe, mis annab arendajatele võimaluse luua intuitiivsemaid, sidusamaid ja kaasahaaravamaid kasutajateekondi. Lehtede üleminekute standardiseerimisega sulgeb veebiplatvorm lünga natiivrakendustega, võimaldades uut kvaliteeti ja poleerimist igat tüüpi veebisaitide jaoks.

Kui brauseri tugi laieneb, võime oodata uut loomingulisuse lainet veebidisainis, kus lehtede vaheline teekond on sama läbimõeldult kujundatud kui lehed ise. SPA-de ja MPA-de piirid ähmastuvad veelgi, võimaldades meeskondadel valida oma projekti jaoks parima arhitektuuri, ohverdamata kasutajakogemust.

Järeldus: Alustage sujuvamate kogemuste loomist juba täna

CSS View Transition API pakub haruldast võimsate võimaluste ja tähelepanuväärse lihtsuse kombinatsiooni. See pakub tõhusat, juurdepääsetavat ja progressiivselt täiustatud viisi oma saidi kasutajakogemuse tõstmiseks funktsionaalsest rõõmustavaks.

Olenemata sellest, kas koostate keerukat SPA-d või traditsioonilist serveriga renderdatud veebisaiti, on tööriistad nüüd saadaval, et kõrvaldada häirivad lehtede laadimised ja suunata oma kasutajaid läbi oma liidese sujuvate, sisukate animatsioonidega. Parim viis selle jõu mõistmiseks on seda proovida. Võtke väike osa oma rakendusest – galerii, seadete leht või tootevoog – ja katsetage. Olete üllatunud, kuidas mõned read koodi võivad teie veebisaidi tunnet oluliselt muuta.

Valge välgatuse ajastu lõppeb. Veebinavigeerimise tulevik on sujuv ja View Transition API-ga on teil kõik vajalik selle ehitamise alustamiseks juba täna.