CSS Perėjimo tarp rodinių API: Išsamus sklandaus puslapių naršymo įdiegimo vadovas

Dešimtmečius naršymas internete buvo apibrėžtas šiurpios realybės: tuščias baltas ekranas. Paspaudus nuorodą, reikšdavo pilną puslapio perkrovimą, trumpą nieko blyksnį, o tada staigų naujo turinio atsiradimą. Nors ir funkcionali, šiai patirčiai trūksta sklandumo ir poliravimo, kurio vartotojai tikisi iš vietinių aplikacijų. Vieno puslapio aplikacijos (SPA) atsirado kaip sprendimas, naudojant sudėtingus JavaScript karkasus, siekiant sukurti sklandžius perėjimus, bet dažnai architektūros paprastumo ir pradinio įkėlimo našumo sąskaita.

O jei galėtume turėti geriausią iš abiejų pasaulių? Paprasta, serverio generuota kelių puslapių aplikacijos (MPA) architektūra kartu su elegantiškais, prasmingais SPA perėjimais. Tai yra CSS Perėjimo tarp rodinių API pažadas, novatoriška naršyklės funkcija, pasirengusi iš esmės pakeisti mūsų požiūrį į vartotojo patirties kūrimą internete.

Šis išsamus vadovas nuves jus į gilų Perėjimo tarp rodinių API tyrinėjimą. Mes išnagrinėsime, kas tai yra, kodėl tai yra monumentalus poslinkis interneto kūrimui ir kaip galite ją įdiegti šiandien – tiek SPA, tiek, kas įdomiau, tradicinėms MPA. Pasiruoškite atsisveikinti su baltu blyksniu ir pasisveikinti su nauja sklandaus naršymo internete era.

Kas yra CSS Perėjimo tarp rodinių API?

CSS Perėjimo tarp rodinių API yra mechanizmas, įdiegtas tiesiai į interneto platformą, leidžiantis kūrėjams kurti animuotus perėjimus tarp skirtingų DOM (Document Object Model) būsenų. Iš esmės ji suteikia paprastą būdą valdyti vizualinį pokytį iš vieno rodinio į kitą, nesvarbu, ar tas pokytis vyksta tame pačiame puslapyje (SPA), ar tarp dviejų skirtingų dokumentų (MPA).

Procesas yra nepaprastai sumanus. Kai perėjimas suaktyvinamas, naršyklė:

1. Padaro dabartinės puslapio būsenos „ekrano nuotrauką“ (seną rodinį).
2. Leidžia atnaujinti DOM į naują būseną.
3. Padaro naujos puslapio būsenos „ekrano nuotrauką“ (naują rodinį).
4. Uždeda seno rodinio ekrano nuotrauką ant naujo, tiesioginio rodinio.
5. Animuoja perėjimą tarp jų, paprastai su sklandžiu kryžminiu išblukimu pagal numatymą.

Visą šį procesą orkestruoja naršyklė, todėl jis yra labai našus. Svarbiausia, ji suteikia kūrėjams visišką animacijos valdymą naudojant standartinį CSS, paversdama tai, kas anksčiau buvo sudėtinga JavaScript užduotis, į deklaratyvų ir prieinamą stiliaus iššūkį.

Kodėl tai iš esmės keičia interneto kūrimą

Šios API įvedimas nėra tik dar vienas laipsniškas atnaujinimas; tai iš esmės patobulina interneto platformą. Štai kodėl tai yra taip reikšminga kūrėjams ir vartotojams visame pasaulyje:

• Žymiai pagerinta vartotojo patirtis (UX): Sklandūs perėjimai nėra tik kosmetika. Jie suteikia vizualinį tęstinumą, padėdami vartotojams suprasti ryšį tarp skirtingų rodinių. Elementas, kuris sklandžiai išauga iš miniatiūros į viso dydžio vaizdą, suteikia kontekstą ir nukreipia vartotojo dėmesį, todėl sąsaja atrodo intuityvesnė ir jautresnė.
• Žymiai supaprastintas kūrimas: Prieš šią API, norint pasiekti panašius efektus, reikėjo sunkių JavaScript bibliotekų (tokių kaip Framer Motion arba GSAP) arba sudėtingų CSS-in-JS sprendimų. Perėjimo tarp rodinių API pakeičia šį sudėtingumą paprastu funkcijos iškvietimu ir keliomis CSS eilutėmis, sumažindama kliūtį kuriant gražias, į programėles panašias patirtis.
• Puikus našumas: Perkeliant animacijos logiką į naršyklės atvaizdavimo variklį, perėjimai tarp rodinių gali būti našesni ir taupiau naudoti akumuliatorių nei jų JavaScript valdomi atitikmenys. Naršyklė gali optimizuoti procesą taip, kaip sunku pakartoti rankiniu būdu.
• SPA-MPA skirtumo panaikinimas: Turbūt pats įdomiausias aspektas yra jo palaikymas perėjimams tarp dokumentų. Tai leidžia tradicinėms, serverio generuotoms svetainėms (MPA) pritaikyti sklandų naršymą, kuris ilgą laiką buvo laikomas išskirtiniu SPA. Įmonės dabar gali patobulinti savo esamas svetaines su šiuolaikiniais UX modeliais, neatlikdamos brangios ir sudėtingos architektūrinės migracijos į pilną SPA karkasą.

Pagrindinės sąvokos: magijos, slypinčios už perėjimų tarp rodinių, supratimas

Norėdami įvaldyti API, pirmiausia turite suprasti du pagrindinius jos komponentus: JavaScript paleidiklį ir CSS pseudo-elementų medį, kuris leidžia tinkinti.

JavaScript įvesties taškas: `document.startViewTransition()`

Viskas prasideda nuo vienos JavaScript funkcijos: `document.startViewTransition()`. Ši funkcija kaip argumentą priima atgalinį iškvietimą. Šio atgalinio iškvietimo viduje atliekate visas DOM manipuliacijas, reikalingas norint pereiti iš senos būsenos į naują.

Tipinis iškvietimas atrodo taip:

// Pirmiausia patikrinkite, ar naršyklė palaiko API
if (!document.startViewTransition) {
  // Jei nepalaikoma, atnaujinkite DOM tiesiogiai
  updateTheDOM();
} else {
  // Jei palaikoma, apvyniokite DOM atnaujinimą į perėjimo funkciją
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

Kai iškviečiate `startViewTransition`, naršyklė inicijuoja fiksavimo-atnaujinimo-animacijos seką, aprašytą anksčiau. Funkcija grąžina `ViewTransition` objektą, kuriame yra pažadai, leidžiantys prisijungti prie skirtingų perėjimo gyvavimo ciklo etapų, kad galėtumėte labiau valdyti.

CSS Pseudo-Elementų medis

Tikroji tinkinimo galia slypi specialiame CSS pseudo-elementų rinkinyje, kurį naršyklė sukuria perėjimo metu. Šis laikinas medis leidžia stilizuoti senus ir naujus rodinius atskirai.

• ::view-transition: medžio šaknis, apimanti visą rodinį. Galite ją naudoti norėdami nustatyti perėjimo fono spalvą arba trukmę.
• ::view-transition-group(name): atskiro perėjimo elemento atstovas. Jis yra atsakingas už elemento padėtį ir dydį animacijos metu.
• ::view-transition-image-pair(name): senų ir naujų elemento rodinių talpykla. Ji stilizuota kaip izoliuojantis `mix-blend-mode`.
• ::view-transition-old(name): elemento ekrano nuotrauka senojoje būsenoje (pvz., miniatiūra).
• ::view-transition-new(name): tiesioginis elemento atvaizdavimas naujoje būsenoje (pvz., viso dydžio vaizdas).

Pagal numatymą, vienintelis elementas šiame medyje yra `root`, kuris atstovauja visam puslapiui. Norėdami animuoti konkrečius elementus tarp būsenų, turite jiems suteikti nuoseklų `view-transition-name`.

Praktinis įdiegimas: jūsų pirmasis perėjimas tarp rodinių (SPA pavyzdys)

Sukurkime įprastą UI šabloną: kortelių sąrašą, kuris, paspaudus, pereina į išsamų rodinį tame pačiame puslapyje. Svarbiausia yra turėti bendrą elementą, pvz., vaizdą, kuris sklandžiai transformuojasi tarp dviejų būsenų.

1 žingsnis: HTML struktūra

Mums reikia talpyklos mūsų sąrašui ir talpyklos išsamiam rodiniui. Mes perjungsime klasę tėvinio elemento, kad parodytume vieną ir paslėptume kitą.

<div id="app-container">
  <div class="list-view">
    <!-- 1 kortelė -->
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="1 elementas">
      <h3>Pirmas produktas</h3>
    </div>
    <!-- Daugiau kortelių... -->
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="1 elementas">
    <h1>Pirmas produktas</h1>
    <p>Išsamus aprašymas čia...</p>
    <button id="back-button">Atgal</button>
  </div>
</div>

2 žingsnis: priskirkite `view-transition-name`

Kad naršyklė suprastų, jog miniatiūros vaizdas ir išsamus vaizdas yra *tas pats konceptualus elementas*, turime jiems suteikti tą patį `view-transition-name` mūsų CSS. Šis pavadinimas turi būti unikalus kiekvienam pereinančiam elementui puslapyje bet kuriuo metu.

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

Mes naudojame `.active` klasę, kurią pridėsime su JavaScript, kad užtikrintume, jog pavadinimas būtų priskirtas tik matomiems elementams, išvengiant konfliktų.

3 žingsnis: JavaScript logika

Dabar parašysime funkciją, kuri tvarko DOM atnaujinimą ir apvyniosime ją `document.startViewTransition()`.

function showDetailView(itemId) {
  const updateDOM = () => {
    // Pridėkite „active“ klasę prie teisingos kortelės ir išsamaus rodinio
    // Tai taip pat priskiria view-transition-name per CSS
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // Paslėpkite sąrašą ir parodykite išsamų rodinį
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

Su tuo, paspaudus kortelę, suaktyvės sklandi, besikeičianti vaizdo animacija ir kryžminis išblukimas likusiam puslapio turiniui. Nereikia jokios sudėtingos animacijos laiko juostos ar bibliotekos.

Kita riba: perėjimai tarp dokumentų MPA

Čia API tampa tikrai transformuojanti. Pritaikyti šiuos sklandžius perėjimus tradicinėms kelių puslapių aplikacijoms (MPA) anksčiau buvo neįmanoma, nepaverčiant jų SPA. Dabar tai paprastas pasirinkimas.

Perėjimų tarp dokumentų įgalinimas

Norėdami įgalinti perėjimus navigacijai tarp skirtingų puslapių, turite pridėti paprastą CSS at-taisyklę prie abiejų šaltinio ir paskirties puslapių CSS:

@view-transition {
  navigation: auto;
}

Viskas. Kai ši taisyklė yra, naršyklė automatiškai naudos perėjimą tarp rodinių (numatytąjį kryžminį išblukimą) visoms tos pačios kilmės navigacijoms.

Svarbiausia: nuoseklus `view-transition-name`

Kaip ir SPA pavyzdyje, elementų sujungimo per du atskirus puslapius magija priklauso nuo bendro, unikalaus `view-transition-name`. Įsivaizduokime produktų sąrašo puslapį (`/products`) ir produkto išsamios informacijos puslapį (`/products/item-1`).

`products.html`:

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

`product-detail.html`:

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

Kai vartotojas paspaudžia nuorodą pirmame puslapyje, naršyklė mato elementą su `view-transition-name: product-image-1`, paliekantį puslapį. Tada ji laukia, kol bus įkeltas naujas puslapis. Kai atvaizduojamas antras puslapis, ji randa elementą su tuo pačiu `view-transition-name` ir automatiškai sukuria sklandžią transformacijos animaciją tarp jų. Likęs puslapio turinys pagal numatymą pereina į subtilų kryžminį išblukimą. Tai sukuria greičio ir tęstinumo suvokimą, kuris anksčiau buvo neįsivaizduojamas MPA.

Pažangios technologijos ir tinkinimas

Numatytasis kryžminis išblukimas yra elegantiškas, tačiau API suteikia gilias tinkinimo kabliukus per CSS animacijas.

Animacijų tinkinimas su CSS

Galite perrašyti numatytąsias animacijas nukreipdami pseudo-elementus su standartinėmis CSS `@keyframes` ir `animation` savybėmis.

Pavyzdžiui, norėdami sukurti „stumdomą iš dešinės“ efektą naujam puslapio turiniui:

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

Galite pritaikyti skirtingas animacijas `::view-transition-old` ir `::view-transition-new` skirtingiems elementams, kad sukurtumėte labai choreografuotus ir sudėtingus perėjimus.

Perėjimo tipų valdymas su klasėmis

Įprastas reikalavimas yra turėti skirtingas animacijas pirmyn ir atgal navigacijai. Pavyzdžiui, pirmyn navigacija gali pastumti naują puslapį iš dešinės, o atgal navigacija pastumia jį iš kairės. Tai galima pasiekti pridedant klasę prie dokumento elemento (`<html>`) prieš suaktyvinant perėjimą.

JavaScript „atgal“ mygtukui:

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // Logika, kad grįžtumėte atgal
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

CSS skirtingų animacijų apibrėžimui:

/* Numatytasis animavimas pirmyn */
::view-transition-new(root) {
  animation: slide-from-right 0.5s;
} /* Atgal animavimas */
.is-going-back::view-transition-new(root) {
  animation: slide-from-left 0.5s;
}

Šis galingas šablonas suteikia detalų vartotojo navigacijos patirties valdymą.

Prieinamumo aspektai

Šiuolaikinė interneto API būtų neišsami be stipraus įmontuoto prieinamumo, o Perėjimo tarp rodinių API tai užtikrina.

• Vartotojo nuostatų gerbimas: API automatiškai gerbia medijos užklausą `prefers-reduced-motion`. Jei vartotojas nurodė, kad jam labiau patinka mažiau judesio savo operacinės sistemos nustatymuose, perėjimas praleidžiamas ir DOM atnaujinimas įvyksta akimirksniu. Tai vyksta pagal numatymą be jokio papildomo darbo iš kūrėjo.
• Dėmesio išlaikymas: Perėjimai yra tik vizualūs. Jie netrukdo standartiniam dėmesio valdymui. Kūrėjas vis dar yra atsakingas už tai, kad po perėjimo klaviatūros dėmesys būtų perkeltas į loginį elementą naujame rodinyje, pvz., pagrindinę antraštę arba pirmą interaktyvų elementą.
• Semantinis HTML: API yra patobulinimo sluoksnis. Jūsų pagrindinis HTML turėtų išlikti semantinis ir prieinamas. Vartotojas su ekrano skaitytuvu arba nepalaikančia naršykle patirs turinį be perėjimo, todėl struktūra turi būti prasminga savaime.

Naršyklės palaikymas ir progresyvus tobulinimas

2023 m. pabaigoje Perėjimo tarp rodinių API SPA palaikoma naršyklėse, pagrįstose Chromium (Chrome, Edge, Opera). Perėjimai tarp dokumentų MPA pasiekiami už funkcijos vėliavėlės ir yra aktyviai kuriami.

API buvo sukurta nuo pat pradžių progresyviam tobulinimui. Sarginis šablonas, kurį naudojome anksčiau, yra raktas:

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

Šis paprastas patikrinimas užtikrina, kad jūsų kodas bando sukurti perėjimą tik naršyklėse, kurios jį palaiko. Senesnėse naršyklėse DOM atnaujinimas įvyksta akimirksniu, kaip visada buvo. Tai reiškia, kad galite pradėti naudoti API šiandien, kad pagerintumėte vartotojų patirtį šiuolaikinėse naršyklėse, be jokio neigiamo poveikio tiems, kurie naudoja senesnes. Tai abipusiai naudinga situacija.

Interneto navigacijos ateitis

Perėjimo tarp rodinių API yra daugiau nei tik įrankis akį traukiančioms animacijoms. Tai iš esmės pasikeitimas, suteikiantis kūrėjams galimybę kurti intuityvesnes, darnesnes ir patrauklesnes vartotojo keliones. Standartizuodama perėjimus tarp puslapių, interneto platforma mažina atotrūkį su vietinėmis aplikacijomis, įgalindama naują kokybės ir poliravimo lygį visų tipų svetainėms.

Plečiantis naršyklių palaikymui, galime tikėtis naujos kūrybiškumo bangos interneto dizaine, kur kelionė tarp puslapių tampa tokia pat apgalvota, kaip ir patys puslapiai. Linijos tarp SPA ir MPA ir toliau trinsis, leisdamos komandoms pasirinkti geriausią architektūrą savo projektui, neprarandant vartotojo patirties.

Išvada: pradėkite kurti sklandesnes patirtis šiandien

CSS Perėjimo tarp rodinių API siūlo retą galingų galimybių ir nepaprasto paprastumo derinį. Ji suteikia našų, prieinamą ir progresyviai patobulintą būdą, kaip pagerinti savo svetainės vartotojo patirtį nuo funkcinės iki malonios.

Nesvarbu, ar kuriate sudėtingą SPA, ar tradicinę serverio generuotą svetainę, dabar yra prieinami įrankiai, leidžiantys pašalinti šiurpius puslapių įkėlimus ir nukreipti vartotojus per savo sąsają su sklandžiomis, prasmingomis animacijomis. Geriausias būdas suprasti jos galią yra išbandyti ją. Paimkite mažą savo aplikacijos dalį – galeriją, nustatymų puslapį arba produkto srautą – ir eksperimentuokite. Būsite nustebinti, kaip kelios kodo eilutės gali iš esmės pakeisti jūsų svetainės pojūtį.

Balto blyksnio era baigiasi. Interneto navigacijos ateitis yra sklandi, o su Perėjimo tarp rodinių API jūs turite viską, ko reikia, kad pradėtumėte ją kurti šiandien.