Ovladavanje CSS View Transitions: Dubinski pregled stiliziranja pseudo-elemenata

U neprestano razvijajućem svijetu web razvoja, težnja za besprijekornim, fluidnim i privlačnim korisničkim iskustvom je konstanta. Godinama su se programeri trudili premostiti jaz između weba i nativnih aplikacija, posebno u pogledu glatkoće prijelaza stranica. Tradicionalna web navigacija često rezultira grubim, potpunim ponovnim učitavanjem stranice — prazan bijeli zaslon koji na trenutak prekida korisnikovu uronjenost. Aplikacije s jednom stranicom (SPA) su to ublažile, ali stvaranje prilagođenih, smislenih prijelaza ostalo je složen i često krhak zadatak, koji se uvelike oslanjao na JavaScript biblioteke i zamršeno upravljanje stanjem.

Upoznajte CSS View Transitions API, tehnologiju koja mijenja pravila igre i koja je spremna revolucionarizirati način na koji obrađujemo promjene korisničkog sučelja na webu. Ovaj moćni API pruža jednostavan, ali nevjerojatno fleksibilan mehanizam za animiranje između različitih DOM stanja, čineći lakšim nego ikad stvaranje dotjeranih iskustava nalik aplikacijama kakva su korisnici očekivali. U srcu snage ovog API-ja leži skup novih CSS pseudo-elemenata. To nisu vaši tipični selektori; oni su dinamični, privremeni elementi koje generira preglednik kako bi vam pružio detaljnu kontrolu nad svakom fazom prijelaza. Ovaj vodič će vas provesti kroz dubinski pregled ovog stabla pseudo-elemenata, istražujući kako stilizirati svaku komponentu za izgradnju zapanjujućih, performansnih i pristupačnih animacija za globalnu publiku.

Anatomija View Transitiona

Prije nego što možemo stilizirati prijelaz, moramo razumjeti što se događa ispod površine kada se on pokrene. Kada pokrenete view transition (na primjer, pozivom document.startViewTransition()), preglednik izvršava niz koraka:

• Snimanje starog stanja: Preglednik snima "screenshot" trenutnog stanja stranice.
• Ažuriranje DOM-a: Vaš kod zatim unosi promjene u DOM (npr. navigacija na novi prikaz, dodavanje ili uklanjanje elemenata).
• Snimanje novog stanja: Nakon što je ažuriranje DOM-a dovršeno, preglednik snima "screenshot" novog stanja.
• Izgradnja stabla pseudo-elemenata: Preglednik zatim konstruira privremeno stablo pseudo-elemenata u sloju preko stranice (overlay). Ovo stablo sadrži snimljene slike starog i novog stanja.
• Animiranje: CSS animacije se primjenjuju na ove pseudo-elemente, stvarajući gladak prijelaz iz starog u novo stanje. Zadana animacija je jednostavno postupno pretapanje (cross-fade).
• Čišćenje: Nakon što su animacije dovršene, stablo pseudo-elemenata se uklanja, a korisnik može stupiti u interakciju s novim, aktivnim DOM-om.

Ključ prilagodbe je ovo privremeno stablo pseudo-elemenata. Zamislite ga kao skup slojeva u dizajnerskom alatu, privremeno postavljenih na vrh vaše stranice. Imate potpunu CSS kontrolu nad tim slojevima. Evo strukture s kojom ćete raditi:

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

Raščlanimo što svaki od ovih pseudo-elemenata predstavlja.

Postava pseudo-elemenata

::view-transition: Ovo je korijen cijele strukture. To je jedan element koji ispunjava vidljivi dio prozora (viewport) i nalazi se iznad svog ostalog sadržaja stranice. Djeluje kao spremnik za sve tranzicijske grupe i odlično je mjesto za postavljanje općih svojstava prijelaza poput trajanja ili funkcije vremenskog odvijanja (timing function).

::view-transition-group(*): Za svaki zasebni element u prijelazu (identificiran CSS svojstvom view-transition-name), stvara se grupa. Ovaj pseudo-element odgovoran je za animiranje pozicije i veličine svog sadržaja. Ako imate karticu koja se pomiče s jedne strane ekrana na drugu, upravo se ::view-transition-group pomiče.

::view-transition-image-pair(*): Ugniježđen unutar grupe, ovaj element djeluje kao spremnik i maska za izrezivanje (clipping mask) za stari i novi prikaz. Njegova primarna uloga je održavanje efekata poput border-radius ili transform tijekom animacije i upravljanje zadanom animacijom postupnog pretapanja (cross-fade).

::view-transition-old(*): Ovo predstavlja "screenshot" ili renderirani prikaz elementa u njegovom starom stanju (prije promjene DOM-a). Prema zadanim postavkama, animira se od opacity: 1 do opacity: 0.

::view-transition-new(*): Ovo predstavlja "screenshot" ili renderirani prikaz elementa u njegovom novom stanju (nakon promjene DOM-a). Prema zadanim postavkama, animira se od opacity: 0 do opacity: 1.

Korijen: Stiliziranje ::view-transition pseudo-elementa

Pseudo-element ::view-transition je platno na kojem se oslikava cijela vaša animacija. Kao spremnik najviše razine, idealno je mjesto za definiranje svojstava koja bi se trebala primjenjivati globalno na prijelaz. Preglednik prema zadanim postavkama nudi skup animacija, ali ih možete lako nadjačati.

Na primjer, zadani prijelaz je postupno pretapanje koje traje 250 milisekundi. Ako to želite promijeniti za svaki prijelaz na svojoj stranici, možete ciljati korijenski pseudo-element:

::view-transition {

  animation-duration: 500ms;

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

}

Ovo jednostavno pravilo sada čini da sva zadana pretapanja stranica traju dvostruko duže i koriste 'ease-in-out' krivulju, dajući im malo drugačiji osjećaj. Iako ovdje možete primijeniti složene animacije, općenito je najbolje koristiti ga za definiranje univerzalnog vremena i ublažavanja (easing), prepuštajući detaljniju koreografiju specifičnijim pseudo-elementima.

Grupiranje i imenovanje: Moć svojstva `view-transition-name`

Bez dodatnog truda, View Transition API pruža postupno pretapanje za cijelu stranicu. To se rješava jednom pseudo-element grupom za korijen. Prava snaga API-ja otključava se kada želite napraviti prijelaz specifičnih, pojedinačnih elemenata između stanja. Na primjer, kada minijatura proizvoda na stranici s popisom neprimjetno raste i premješta se na poziciju glavne slike proizvoda na stranici s detaljima.

Da biste pregledniku rekli da su dva elementa u različitim DOM stanjima konceptualno ista, koristite CSS svojstvo view-transition-name. Ovo svojstvo mora se primijeniti i na početni i na završni element.

/* Na CSS-u stranice s popisom */

.product-thumbnail {

  view-transition-name: product-image;

}

/* Na CSS-u stranice s detaljima */

.main-product-image {

  view-transition-name: product-image;

}

Davanjem istog jedinstvenog imena oba elementa ('product-image' u ovom slučaju), upućujete preglednik: "Umjesto da samo postupno zatamniš staru stranicu i prikažeš novu, stvori poseban prijelaz za ovaj specifični element." Preglednik će sada generirati namjenski ::view-transition-group(product-image) za rukovanje njegovom animacijom odvojeno od korijenskog pretapanja. Ovo je temeljni koncept koji omogućuje popularni "morfirajući" ili "shared element" efekt prijelaza.

Važna napomena: U bilo kojem trenutku tijekom prijelaza, view-transition-name mora biti jedinstven. Ne možete imati dva vidljiva elementa s istim imenom u isto vrijeme.

Detaljno stiliziranje: Ključni pseudo-elementi

S imenovanim elementima, sada možemo zaroniti u stiliziranje specifičnih pseudo-elemenata koje preglednik generira za njih. Ovdje možete stvoriti uistinu prilagođene i izražajne animacije.

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

Jedina odgovornost grupe je prijelaz s veličine i položaja starog elementa na veličinu i položaj novog elementa. Ona ne sadrži stvarni izgled sadržaja, samo njegov granični okvir. Zamislite ga kao pokretni okvir.

Prema zadanim postavkama, preglednik animira njegova svojstva transform i width/height. Možete to nadjačati kako biste stvorili različite efekte. Na primjer, mogli biste dodati luk njegovom kretanju animirajući ga duž zakrivljene putanje, ili ga natjerati da se povećava i smanjuje tijekom svog putovanja.

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

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

}

U ovom primjeru, primjenjujemo specifičnu funkciju ublažavanja (easing) samo na kretanje slike proizvoda, čineći ga dinamičnijim i fizičkijim, bez utjecaja na zadano pretapanje ostatka stranice.

`::view-transition-image-pair(name)`: Element za izrezivanje i pretapanje

Ugniježđen unutar pokretne grupe, par slika (image-pair) drži stari i novi prikaz. Djeluje kao maska za izrezivanje, pa ako vaš element ima border-radius, par slika osigurava da sadržaj ostane izrezan s tim radijusom tijekom animacije veličine i položaja. Njegov drugi glavni zadatak je orkestrirati zadano postupno pretapanje između starog i novog sadržaja.

Možda ćete htjeti stilizirati ovaj element kako biste osigurali vizualnu dosljednost ili stvorili naprednije efekte. Ključno svojstvo koje treba razmotriti je isolation: isolate. To je presudno ako planirate koristiti napredne mix-blend-mode efekte na podređenim elementima (starom i novom), jer stvara novi kontekst slaganja (stacking context) i sprječava da miješanje utječe na elemente izvan prijelazne grupe.

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

  isolation: isolate;

}

`::view-transition-old(name)` i `::view-transition-new(name)`: Zvijezde predstave

Ovo su pseudo-elementi koji predstavljaju vizualni izgled vašeg elementa prije i nakon promjene DOM-a. Ovdje će se odvijati većina vašeg prilagođenog animacijskog rada. Prema zadanim postavkama, preglednik na njima pokreće jednostavnu animaciju postupnog pretapanja koristeći opacity i mix-blend-mode. Da biste stvorili prilagođenu animaciju, prvo morate isključiti zadanu.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Jednom kada je zadana animacija onemogućena, slobodni ste primijeniti vlastitu. Istražimo nekoliko uobičajenih obrazaca.

Prilagođena animacija: Klizanje (Slide)

Umjesto postupnog pretapanja, učinimo da sadržaj spremnika klizi unutra. Na primjer, prilikom navigacije između članaka, želimo da tekst novog članka klizi s desna, dok stari tekst klizi van ulijevo.

Prvo, definirajte ključne kadrove (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%); }

}

Sada, primijenite ove animacije na stari i novi pseudo-element za imenovani 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;

}

Prilagođena animacija: 3D okretanje (Flip)

Za dramatičniji efekt, možete stvoriti 3D okretanje kartice. To zahtijeva animiranje svojstva transform s rotateY i također upravljanje svojstvom backface-visibility.

/* Grupa treba 3D kontekst */

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

  transform-style: preserve-3d;

}

/* Par slika također treba sačuvati 3D kontekst */

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

  transform-style: preserve-3d;

}

/* Stari prikaz se okreće od 0 do -180 stupnjeva */

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

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

  backface-visibility: hidden;

}

/* Novi prikaz se okreće od 180 do 0 stupnjeva */

::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 primjeri i napredne tehnike

Teorija je korisna, ali kroz praktičnu primjenu zaista učimo. Prođimo kroz neke uobičajene scenarije i kako ih riješiti pomoću view transition pseudo-elemenata.

Primjer: "Morfirajuća" minijatura kartice

Ovo je klasični "shared element" prijelaz. Zamislite galeriju korisničkih profila. Svaki profil je kartica s avatarom. Kada kliknete na karticu, navigirate na stranicu s detaljima gdje je taj isti avatar istaknuto prikazan na vrhu.

Korak 1: Dodijelite imena

Na vašoj stranici galerije, slika avatara dobiva ime. Ime bi trebalo biti jedinstveno za svaku karticu, na primjer, na temelju ID-a korisnika.

/* U gallery-item.css */

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

Na stranici s detaljima profila, veliki avatar u zaglavlju dobiva potpuno isto ime.

/* U profile-page.css */

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

Korak 2: Prilagodite animaciju

Prema zadanim postavkama, preglednik će premjestiti i skalirati avatar, ali će također i postupno pretapati sadržaj. Ako je slika identična, ovo pretapanje je nepotrebno i može uzrokovati lagano treperenje. Možemo ga onemogućiti.

/* Zvjezdica (*) ovdje je zamjenski znak za bilo koju imenovanu grupu */

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

  /* Onemogući zadano pretapanje */

  animation-duration: 0s;

}

Čekajte, ako onemogućimo pretapanje, kako se sadržaj prebacuje? Za dijeljene elemente gdje su stari i novi prikazi identični, preglednik je dovoljno pametan da koristi samo jedan prikaz za cijeli prijelaz. `image-pair` u suštini drži samo jednu sliku, pa onemogućavanje pretapanja jednostavno otkriva tu optimizaciju. Za elemente gdje se sadržaj stvarno mijenja, trebali biste imati prilagođenu animaciju umjesto zadanog pretapanja.

Rukovanje promjenama omjera slike (Aspect Ratio)

Čest izazov nastaje kada element u prijelazu mijenja svoj omjer slike. Na primjer, minijatura pejzaža 16:9 na stranici s popisom može prijeći u kvadratni avatar 1:1 na stranici s detaljima. Zadano ponašanje preglednika je neovisno animiranje širine i visine, što rezultira time da slika izgleda zgnječeno ili rastegnuto tijekom prijelaza.

Rješenje je elegantno. Pustimo da ::view-transition-group obradi promjenu veličine i položaja, ali nadjačamo stiliziranje starih i novih slika unutar njega.

Cilj je natjerati stari i novi "screenshot" da ispune svoj spremnik bez izobličenja. To možemo učiniti postavljanjem njihove širine i visine na 100% i dopuštanjem da zadano svojstvo object-fit preglednika (koje se nasljeđuje od originalnog elementa) ispravno obradi skaliranje.

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

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

  /* Spriječite izobličenje ispunjavanjem spremnika */

  width: 100%;

  height: 100%;

  

  /* Nadjačajte zadano postupno pretapanje kako biste jasno vidjeli efekt */

  animation: none;

}

S ovim CSS-om, `image-pair` će glatko animirati svoj omjer slike, a slike unutar njega bit će ispravno izrezane ili će imati crne trake (ovisno o njihovoj `object-fit` vrijednosti), baš kao što bi bile u normalnom spremniku. Zatim možete dodati vlastite prilagođene animacije, poput postupnog pretapanja, povrh ove ispravljene geometrije.

Debugiranje i podrška preglednika

Stiliziranje elemenata koji postoje samo djelić sekunde može biti zahtjevno. Srećom, moderni preglednici pružaju izvrsne alate za razvojne programere za to. U Chrome ili Edge DevTools, možete otići na panel "Animations", i kada pokrenete view transition, možete ga pauzirati. S pauziranom animacijom, možete koristiti panel "Elements" za pregled cijelog `::view-transition` stabla pseudo-elemenata kao i bilo kojeg drugog dijela DOM-a. Možete vidjeti stilove koji se primjenjuju i čak ih mijenjati u stvarnom vremenu kako biste usavršili svoje animacije.

Krajem 2023., View Transitions API podržan je u preglednicima temeljenim na Chromiumu (Chrome, Edge, Opera). Implementacije su u tijeku za Firefox i Safari. To ga čini savršenim kandidatom za progresivno poboljšanje. Korisnici s podržanim preglednicima dobivaju divno, poboljšano iskustvo, dok korisnici na drugim preglednicima dobivaju standardnu, trenutnu navigaciju. Podršku možete provjeriti u CSS-u:

@supports (view-transition: none) {

  /* Svi view-transition stilovi idu ovdje */

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

}

Najbolje prakse za globalnu publiku

Prilikom implementacije animacija, ključno je uzeti u obzir raznolikost korisnika i uređaja diljem svijeta.

Performanse: Animacije bi trebale biti brze i fluidne. Držite se animiranja CSS svojstava koja su za preglednik jeftina za obradu, prvenstveno transform i opacity. Animiranje svojstava poput width, height ili margin može pokrenuti ponovno izračunavanje izgleda (layout) na svakom kadru, što dovodi do trzanja i lošeg iskustva, posebno na slabijim uređajima.

Pristupačnost: Neki korisnici doživljavaju mučninu ili nelagodu zbog animacija. Svi glavni operativni sustavi pružaju korisničku postavku za smanjenje pokreta. Moramo to poštovati. Medijski upit prefers-reduced-motion omogućuje vam da onemogućite ili pojednostavite svoje animacije za te korisnike.

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

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Preskočite sve prilagođene animacije i koristite brzo, jednostavno pretapanje */

    animation: none !important;

  }

}

Korisničko iskustvo (UX): Dobre tranzicije imaju svrhu. Trebale bi usmjeravati pažnju korisnika i pružati kontekst o promjeni koja se događa u sučelju. Animacija koja je prespora može učiniti da se aplikacija osjeća tromo, dok ona koja je previše upadljiva može ometati. Ciljajte na trajanje prijelaza između 200ms i 500ms. Cilj je da se animacija više osjeti nego što se vidi.

Zaključak: Budućnost je fluidna

CSS View Transitions API, a posebno njegovo moćno stablo pseudo-elemenata, predstavlja ogroman korak naprijed za web korisnička sučelja. Programerima pruža nativni, performansni i visoko prilagodljiv skup alata za stvaranje fluidnih, stanjenih prijelaza koji su nekada bili isključivo u domeni nativnih aplikacija. Razumijevanjem uloga ::view-transition, ::view-transition-group i parova slika old/new, možete se pomaknuti izvan jednostavnih pretapanja i koreografirati složene, smislene animacije koje poboljšavaju upotrebljivost i oduševljavaju korisnike.

Kako se podrška preglednika širi, ovaj API postat će bitan dio alata modernog front-end programera. Prihvaćanjem njegovih mogućnosti i pridržavanjem najboljih praksi za performanse i pristupačnost, možemo izgraditi web koji nije samo funkcionalniji, već i ljepši i intuitivniji za sve, svugdje.