Obvladovanje prehodov pogleda v CSS: poglobljen vodnik po stiliranju psevdoelementov

V nenehno razvijajočem se svetu spletnega razvoja je iskanje brezhibne, tekoče in privlačne uporabniške izkušnje stalnica. Razvijalci si že leta prizadevajo premostiti vrzel med spletnimi in nativnimi aplikacijami, zlasti pri gladkosti prehodov med stranmi. Tradicionalna spletna navigacija pogosto povzroči grobo osvežitev celotne strani – prazen bel zaslon, ki za trenutek prekine uporabnikovo izkušnjo. Enostranske aplikacije (SPA) so to ublažile, vendar je ustvarjanje smiselnih prehodov po meri ostalo zapleteno in pogosto krhko opravilo, močno odvisno od JavaScript knjižnic in zapletenega upravljanja stanj.

Tukaj nastopi CSS View Transitions API, prelomna tehnologija, ki bo revolucionirala način obravnavanja sprememb uporabniškega vmesnika na spletu. Ta zmogljiv API ponuja preprost, a izjemno prilagodljiv mehanizem za animiranje med različnimi stanji DOM-a, kar olajša ustvarjanje dovršenih, aplikacijam podobnih izkušenj, ki jih uporabniki pričakujejo. V središču moči tega API-ja je nabor novih CSS psevdoelementov. To niso tipični selektorji; so dinamični, začasni elementi, ki jih ustvari brskalnik, da vam omogočijo natančen nadzor nad vsako fazo prehoda. Ta vodnik vas bo popeljal v globine tega drevesa psevdoelementov in raziskal, kako stilsko oblikovati vsako komponento za ustvarjanje osupljivih, zmogljivih in dostopnih animacij za globalno občinstvo.

Anatomija prehoda pogleda

Preden lahko stilsko oblikujemo prehod, moramo razumeti, kaj se zgodi pod pokrovom, ko se ta sproži. Ko zaženete prehod pogleda (na primer s klicem document.startViewTransition()), brskalnik izvede vrsto korakov:

• Zajem starega stanja: Brskalnik naredi »posnetek zaslona« trenutnega stanja strani.
• Posodobitev DOM-a: Vaša koda nato izvede spremembe v DOM-u (npr. prehod na nov pogled, dodajanje ali odstranjevanje elementov).
• Zajem novega stanja: Ko je posodobitev DOM-a končana, brskalnik naredi posnetek zaslona novega stanja.
• Gradnja drevesa psevdoelementov: Brskalnik nato zgradi začasno drevo psevdoelementov v prekrivnem sloju strani. To drevo vsebuje zajete slike starega in novega stanja.
• Animacija: Na te psevdoelemente se uporabijo CSS animacije, ki ustvarijo gladek prehod iz starega v novo stanje. Privzeto je preprosto navzkrižno prelivanje (cross-fade).
• Čiščenje: Ko so animacije končane, se drevo psevdoelementov odstrani in uporabnik lahko interagira z novim, živim DOM-om.

Ključ do prilagajanja je to začasno drevo psevdoelementov. Predstavljajte si ga kot nabor plasti v oblikovalskem orodju, ki so začasno postavljene na vrh vaše strani. Imate popoln CSS nadzor nad temi plastmi. Tukaj je struktura, s katero boste delali:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

Poglejmo si podrobneje, kaj predstavlja vsak od teh psevdoelementov.

Zasedba psevdoelementov

::view-transition: To je koren celotne strukture. Je en sam element, ki zapolni vidno polje (viewport) in se nahaja nad vso ostalo vsebino strani. Deluje kot vsebnik za vse prehodne skupine in je odličen prostor za nastavitev splošnih lastnosti prehoda, kot sta trajanje ali časovna funkcija (timing function).

::view-transition-group(*): Za vsak ločen prehodni element (identificiran z lastnostjo CSS view-transition-name) se ustvari skupina. Ta psevdoelement je odgovoren za animiranje položaja in velikosti svoje vsebine. Če imate kartico, ki se premakne z ene strani zaslona na drugo, se dejansko premika ::view-transition-group.

::view-transition-image-pair(*): Gnezden znotraj skupine, ta element deluje kot vsebnik in maska za obrezovanje (clipping mask) za stari in novi pogled. Njegova primarna vloga je ohranjanje učinkov, kot sta border-radius ali transform, med animacijo in obravnavanje privzete animacije navzkrižnega prelivanja.

::view-transition-old(*): To predstavlja »posnetek zaslona« ali upodobljen pogled elementa v njegovem starem stanju (pred spremembo DOM-a). Privzeto se animira iz opacity: 1 v opacity: 0.

::view-transition-new(*): To predstavlja »posnetek zaslona« ali upodobljen pogled elementa v njegovem novem stanju (po spremembi DOM-a). Privzeto se animira iz opacity: 0 v opacity: 1.

Koren: stilsko oblikovanje psevdoelementa ::view-transition

Psevdoelement ::view-transition je platno, na katerem je naslikana vaša celotna animacija. Kot vsebnik na najvišji ravni je idealen prostor za določanje lastnosti, ki naj veljajo globalno za prehod. Privzeto brskalnik zagotavlja nabor animacij, vendar jih lahko enostavno prepišete.

Na primer, privzeti prehod je navzkrižno prelivanje, ki traja 250 milisekund. Če želite to spremeniti za vsak prehod na vaši spletni strani, se lahko osredotočite na korenski psevdoelement:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

To preprosto pravilo zdaj povzroči, da vsa privzeta prelivanja strani trajajo dvakrat dlje in uporabljajo krivuljo 'ease-in-out', kar jim daje nekoliko drugačen občutek. Čeprav lahko tukaj uporabite zapletene animacije, je na splošno najbolje, da se uporablja za določanje univerzalnega časovnega poteka in funkcij pospeševanja (easing), podrobno koreografijo pa prepustite bolj specifičnim psevdoelementom.

Združevanje in poimenovanje: moč lastnosti `view-transition-name`

Že takoj, brez dodatnega dela, API za prehode pogleda zagotavlja navzkrižno prelivanje za celotno stran. To obravnava ena sama skupina psevdoelementov za koren. Prava moč API-ja se odklene, ko želite ustvariti prehod za določene, posamezne elemente med stanji. Na primer, da se sličica izdelka na seznamu neopazno poveča in premakne na položaj glavne slike izdelka na strani s podrobnostmi.

Da brskalniku poveste, da sta dva elementa v različnih stanjih DOM-a konceptualno enaka, uporabite lastnost CSS view-transition-name. To lastnost je treba uporabiti tako na začetnem kot na končnem elementu.

/* V CSS datoteki seznama */

.product-thumbnail {

  view-transition-name: product-image;

}

/* V CSS datoteki strani s podrobnostmi */

.main-product-image {

  view-transition-name: product-image;

}

S tem, ko obema elementoma daste enako unikatno ime ('product-image' v tem primeru), brskalniku naročite: »Namesto da samo zatemniš staro stran in prikažeš novo, ustvari poseben prehod za ta specifičen element.« Brskalnik bo zdaj ustvaril namensko skupino ::view-transition-group(product-image) za ločeno obravnavanje njegove animacije, neodvisno od korenskega prelivanja. To je temeljni koncept, ki omogoča priljubljen učinek prehoda »preoblikovanja« (morphing) ali »elementa v skupni rabi«.

Pomembno opozorilo: V katerem koli trenutku med prehodom mora biti view-transition-name unikaten. Ne morete imeti dveh vidnih elementov z istim imenom hkrati.

Poglobljeno stilsko oblikovanje: jedrni psevdoelementi

Ko so naši elementi poimenovani, se lahko poglobimo v stilsko oblikovanje specifičnih psevdoelementov, ki jih brskalnik zanje ustvari. Tu lahko ustvarite resnično edinstvene in izrazne animacije.

`::view-transition-group(name)`: Premikač

Edina odgovornost skupine je prehod iz velikosti in položaja starega elementa v velikost in položaj novega elementa. Ne vsebuje videza dejanske vsebine, temveč samo njen omejitveni okvir (bounding box). Predstavljajte si ga kot premikajoč se okvir.

Privzeto brskalnik animira njegove lastnosti transform in width/height. To lahko prepišete, da ustvarite različne učinke. Na primer, lahko dodate lok njegovemu gibanju z animiranjem po ukrivljeni poti ali pa ga povečate in zmanjšate med potjo.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

V tem primeru uporabljamo specifično funkcijo pospeševanja (easing) samo za gibanje slike izdelka, kar ustvarja občutek večje dinamičnosti in fizikalnosti, ne da bi vplivalo na privzeto prelivanje preostalega dela strani.

`::view-transition-image-pair(name)`: Obrezovalnik in prelivalnik

Gnezden znotraj premikajoče se skupine, par slik (image-pair) drži stari in novi pogled. Deluje kot maska za obrezovanje, tako da če ima vaš element border-radius, par slik zagotovi, da vsebina ostane obrezana s tem radijem skozi celotno animacijo velikosti in položaja. Njegova druga glavna naloga je usklajevanje privzetega navzkrižnega prelivanja med staro in novo vsebino.

Morda boste želeli stilsko oblikovati ta element, da zagotovite vizualno doslednost ali ustvarite naprednejše učinke. Ključna lastnost, ki jo je treba upoštevati, je isolation: isolate. To je ključnega pomena, če nameravate uporabiti napredne učinke mix-blend-mode na otrocih (starem in novem), saj ustvari nov kontekst zlaganja (stacking context) in preprečuje, da bi mešanje vplivalo na elemente zunaj prehodne skupine.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` in `::view-transition-new(name)`: Zvezde predstave

To so psevdoelementi, ki predstavljajo vizualni videz vašega elementa pred in po spremembi DOM-a. Tu se bo zgodila večina vašega dela z animacijami po meri. Privzeto brskalnik na njih izvaja preprosto animacijo navzkrižnega prelivanja z uporabo opacity in mix-blend-mode. Če želite ustvariti animacijo po meri, morate najprej izklopiti privzeto.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Ko je privzeta animacija onemogočena, lahko uporabite svojo. Raziščimo nekaj pogostih vzorcev.

Animacija po meri: drsenje

Namesto navzkrižnega prelivanja, poskrbimo, da vsebina vsebnika zdrsne noter. Na primer, pri navigaciji med članki želimo, da besedilo novega članka zdrsne z desne, medtem ko staro besedilo zdrsne ven na levo.

Najprej določite ključne sličice (keyframes):

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Zdaj uporabite te animacije na starem in novem psevdoelementu za poimenovani element 'article-content'.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Animacija po meri: 3D obrat

Za bolj dramatičen učinek lahko ustvarite 3D obrat kartice. To zahteva animiranje lastnosti transform z rotateY in tudi upravljanje z backface-visibility.

/* Skupina potrebuje 3D kontekst */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* Tudi par slik mora ohraniti 3D kontekst */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* Stari pogled se obrne od 0 do -180 stopinj */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* Novi pogled se obrne od 180 do 0 stopinj */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Praktični primeri in napredne tehnike

Teorija je koristna, toda pri praktični uporabi se zares učimo. Poglejmo si nekaj pogostih scenarijev in kako jih rešiti s psevdoelementi za prehode pogleda.

Primer: »preoblikovanje« sličice kartice

To je klasičen prehod elementa v skupni rabi. Predstavljajte si galerijo uporabniških profilov. Vsak profil je kartica z avatarjem. Ko kliknete na kartico, se pomaknete na stran s podrobnostmi, kjer je isti avatar vidno prikazan na vrhu.

1. korak: dodelite imena

Na strani galerije dobi slika avatarja ime. Ime mora biti unikatno za vsako kartico, na primer na podlagi ID-ja uporabnika.

/* V gallery-item.css */

.card-avatar { view-transition-name: avatar-user-123; }

Na strani s podrobnostmi profila dobi velik avatar v glavi popolnoma enako ime.

/* V profile-page.css */

.profile-header-avatar { view-transition-name: avatar-user-123; }

2. korak: prilagodite animacijo

Privzeto bo brskalnik premaknil in spremenil velikost avatarja, hkrati pa bo tudi navzkrižno prelil vsebino. Če je slika identična, je to prelivanje nepotrebno in lahko povzroči rahlo utripanje. To lahko onemogočimo.

/* Zvezdica (*) tukaj je nadomestni znak za katero koli poimenovano skupino */

::view-transition-image-pair(*) {

  /* Onemogoči privzeto prelivanje */

  animation-duration: 0s;

}

Počakajte, če onemogočimo prelivanje, kako se vsebina zamenja? Pri elementih v skupni rabi, kjer sta stari in novi pogled identična, je brskalnik dovolj pameten, da uporabi samo en pogled za celoten prehod. `image-pair` v bistvu vsebuje samo eno sliko, zato onemogočanje prelivanja preprosto razkrije to optimizacijo. Pri elementih, kjer se vsebina dejansko spremeni, bi namesto privzetega prelivanja potrebovali animacijo po meri.

Obravnavanje sprememb razmerja stranic

Pogost izziv se pojavi, ko prehodni element spremeni svoje razmerje stranic. Na primer, sličica v razmerju 16:9 na seznamu se lahko pretvori v kvadratni avatar 1:1 na strani s podrobnostmi. Privzeto obnašanje brskalnika je, da neodvisno animira širino in višino, kar povzroči, da je slika med prehodom videti stisnjena ali raztegnjena.

Rešitev je elegantna. Dovolimo, da ::view-transition-group obravnava spremembo velikosti in položaja, vendar prepišemo stil starih in novih slik znotraj njega.

Cilj je, da stari in novi »posnetki zaslona« zapolnijo svoj vsebnik brez popačenja. To lahko storimo tako, da njihovo širino in višino nastavimo na 100% in dovolimo, da privzeta lastnost brskalnika object-fit (ki se podeduje od prvotnega elementa) pravilno obravnava skaliranje.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Prepreči popačenje z zapolnitvijo vsebnika */

  width: 100%;

  height: 100%;

  

  /* Prepiši privzeto navzkrižno prelivanje, da bo učinek jasno viden */

  animation: none;

}

S tem CSS-om bo `image-pair` gladko animiral svoje razmerje stranic, slike znotraj pa bodo pravilno obrezane ali prikazane s črnimi robovi (odvisno od njihove vrednosti `object-fit`), tako kot bi bile v običajnem vsebniku. Nato lahko na to popravljeno geometrijo dodate svoje animacije po meri, kot je navzkrižno prelivanje.

Odpravljanje napak in podpora brskalnikov

Stilsko oblikovanje elementov, ki obstajajo le za delček sekunde, je lahko zapleteno. Na srečo sodobni brskalniki za to ponujajo odlična razvijalska orodja. V orodjih za razvijalce v brskalnikih Chrome ali Edge lahko odprete ploščo »Animations« in ko sprožite prehod pogleda, ga lahko zaustavite. Z zaustavljeno animacijo lahko nato z uporabo plošče »Elements« pregledate celotno drevo psevdoelementov `::view-transition`, tako kot kateri koli drug del DOM-a. Vidite lahko stile, ki se uporabljajo, in jih celo spreminjate v realnem času, da izpopolnite svoje animacije.

Od konca leta 2023 je API za prehode pogleda podprt v brskalnikih, ki temeljijo na Chromiumu (Chrome, Edge, Opera). Implementacije so v teku za Firefox in Safari. To ga naredi popolnega kandidata za postopno izboljšanje (progressive enhancement). Uporabniki s podprtimi brskalniki dobijo čudovito, izboljšano izkušnjo, medtem ko uporabniki drugih brskalnikov dobijo standardno, takojšnjo navigacijo. Podporo lahko preverite v CSS:

@supports (view-transition: none) {

  /* Vsi stili za view-transition gredo sem */

  ::view-transition-old(my-element) { ... }

}

Najboljše prakse za globalno občinstvo

Pri implementaciji animacij je ključnega pomena upoštevati raznolikost uporabnikov in naprav po vsem svetu.

Zmogljivost: Animacije morajo biti hitre in tekoče. Osredotočite se na animiranje lastnosti CSS, ki jih brskalnik lahko poceni obdela, predvsem transform in opacity. Animiranje lastnosti, kot so width, height ali margin, lahko sproži ponovne izračune postavitve pri vsaki sličici, kar vodi do zatikanja in slabe izkušnje, zlasti na manj zmogljivih napravah.

Dostopnost: Nekateri uporabniki doživljajo slabost ali nelagodje zaradi animacij. Vsi večji operacijski sistemi ponujajo uporabniško nastavitev za zmanjšanje gibanja. To moramo spoštovati. Medijska poizvedba prefers-reduced-motion vam omogoča, da za te uporabnike onemogočite ali poenostavite svoje animacije.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Preskoči vse animacije po meri in uporabi hitro, preprosto prelivanje */

    animation: none !important;

  }

}

Uporabniška izkušnja (UX): Dobri prehodi so namenski. Usmerjati morajo pozornost uporabnika in zagotavljati kontekst o spremembi, ki se dogaja v uporabniškem vmesniku. Prepočasna animacija lahko povzroči, da se aplikacija zdi počasna, medtem ko je preveč kričeča lahko moteča. Ciljajte na trajanje prehoda med 200 ms in 500 ms. Cilj je, da se animacija bolj občuti, kot pa vidi.

Zaključek: prihodnost je tekoča

API za prehode pogleda v CSS in zlasti njegovo zmogljivo drevo psevdoelementov predstavlja ogromen korak naprej za spletne uporabniške vmesnike. Razvijalcem ponuja nativen, zmogljiv in zelo prilagodljiv nabor orodij za ustvarjanje tekočih, stanj polnih prehodov, ki so bili nekoč izključna domena nativnih aplikacij. Z razumevanjem vlog ::view-transition, ::view-transition-group in parov slik old/new se lahko premaknete onkraj preprostih prelivanj in koreografirate zapletene, smiselne animacije, ki izboljšajo uporabnost in navdušujejo uporabnike.

Z razširitvijo podpore brskalnikov bo ta API postal bistven del orodjarne sodobnega front-end razvijalca. S sprejemanjem njegovih zmožnosti in upoštevanjem najboljših praks za zmogljivost in dostopnost lahko gradimo splet, ki ni le bolj funkcionalen, ampak tudi lepši in bolj intuitiven za vse in povsod.