CSS View Transition Capture: Otključavanje besprijekornog sučelja uz očuvanje stanja elemenata

U dinamičnom svijetu web razvoja, stvaranje korisničkih sučelja koja djeluju intuitivno, responzivno i istinski privlačno je od presudne važnosti. Kako web aplikacije postaju složenije, tako raste i potražnja za besprijekornim prijelazima između različitih prikaza ili stanja. Prošli su dani naglih ponovnih učitavanja stranica ili grubih vizualnih promjena; današnji korisnici očekuju fluidno iskustvo, gotovo nalik na aplikaciju, izravno u svojim preglednicima. Ispunjavanje ovog očekivanja povijesno je bio značajan izazov za programere, često zahtijevajući složene JavaScript animacije, komplicirano upravljanje stanjem ili glomazne biblioteke trećih strana.

Upoznajte CSS prijelaze prikaza (CSS View Transitions), revolucionarnu značajku web platforme dizajniranu da pojednostavi stvaranje elegantnih i učinkovitih prijelaza korisničkog sučelja. Iako prijelazi prikaza nude moćan mehanizam za animiranje vizualnih promjena, njihova prava genijalnost leži u manje očitom, ali iznimno utjecajnom svojstvu: hvatanju stanja elemenata (Element State Capture). Ova značajka nadilazi puko vizualno preoblikovanje; ona inteligentno čuva intrinzično stanje elemenata, od korisničkog unosa do pozicija skrolanja i dinamičkog stiliziranja, osiguravajući istinski kontinuirano i ugodno korisničko iskustvo tijekom promjena prikaza.

Ovaj sveobuhvatni vodič duboko će zaroniti u mehaniku hvatanja stanja elemenata u CSS prijelazima prikaza, istražujući njegovu nužnost, principe rada i kako ga programeri širom svijeta mogu iskoristiti za izgradnju vrlo sofisticiranih i pristupačnih web aplikacija. Otkrit ćemo kako ova tehnologija rješava dugogodišnje izazove u razvoju korisničkog sučelja, nudeći praktične uvide i primjenjive strategije za implementaciju u različitim projektima i za globalnu publiku.

Razumijevanje CSS prijelaza prikaza: Temelji

Prije nego što seciramo hvatanje stanja elemenata, ključno je shvatiti temeljni koncept samih CSS prijelaza prikaza. U svojoj srži, prijelaz prikaza je mehanizam orkestriran od strane preglednika koji omogućuje glatke, atomske prijelaze između dva različita stanja DOM-a. Umjesto ručnog animiranja pojedinačnih elemenata pomoću JavaScripta ili složenih CSS ključnih okvira (keyframes), programeri mogu deklarirati prijelaz, a preglednik se brine o složenom plesu stvaranja snimki, animiranja između njih i elegantnog ažuriranja DOM-a.

Što su prijelazi prikaza?

Prijelazi prikaza pružaju deklarativan način za animiranje promjena u DOM-u. Kada se pokrenu, preglednik ne zamjenjuje samo stari sadržaj novim; umjesto toga, snima "stari" prikaz, priprema "novi" prikaz izvan ekrana, a zatim orkestrira animaciju između snimki relevantnih elemenata iz starog i novog prikaza. Ovaj proces osigurava da su prijelazi uvijek glatki, čak i ako su temeljna ažuriranja DOM-a složena ili dugotrajna.

Glavna prednost je odvajanje animacije od ažuriranja DOM-a. Možete ažurirati svoj DOM na bilo koji način (npr. promjenom klasa, dodavanjem/uklanjanjem elemenata, ažuriranjem innerHTML-a), a ako ovo ažuriranje omotate u prijelaz prikaza, preglednik će pokušati animirati promjenu. To značajno pojednostavljuje kod, poboljšava održivost i povećava performanse prebacivanjem složenih zadataka animacije na optimizirani cjevovod za renderiranje preglednika.

Koncept "snimke" (snapshot)

Čarolija prijelaza prikaza temelji se na konceptu "snimki". Kada pokrenete prijelaz prikaza, preglednik snimi sliku (renderiranu snimku) trenutnog stanja DOM-a. To je "stari" prikaz. Zatim, vaš JavaScript ažurira DOM kako bi odražavao "novi" prikaz. Odmah nakon ažuriranja DOM-a, preglednik snima još jednu snimku relevantnih elemenata u njihovim novim pozicijama i stilovima. Prijelaz zatim animira između te dvije snimke.

Ključno je da ovo nisu samo statične slike. Preglednik generira skup pseudo-elemenata (npr. `::view-transition-old`, `::view-transition-new`) koji predstavljaju te snimke. Ovi pseudo-elementi mogu se ciljati CSS animacijama, omogućujući vrlo prilagodljive i izražajne prijelaze. Ovaj sustav osigurava da, čak i ako se DOM drastično promijeni, korisnik percipira kontinuirano, animirano putovanje umjesto naglog skoka.

Svojstvo view-transition-name

Kako bismo pregledniku rekli koji elementi trebaju biti animirani između starog i novog prikaza, i ključno, čija stanja treba uhvatiti, koristimo CSS svojstvo `view-transition-name`. Kada element u starom prikazu i element u novom prikazu dijele isto `view-transition-name`, preglednik razumije da su to logički "isti" element, čak i ako su im se promijenili položaj, veličina ili sadržaj. Zatim pokušava animirati transformaciju između ta dva stanja.

Na primjer, ako imate sliku proizvoda na stranici s popisom, a zatim navigirate na stranicu s detaljima, dodjeljivanje istog `view-transition-name` toj slici proizvoda u oba prikaza govori pregledniku da animira njezino kretanje i promjenu veličine, stvarajući efekt "hero image" prijelaza. Svojstvo `view-transition-name` djeluje kao jedinstveni identifikator unutar konteksta jednog prijelaza, omogućujući pregledniku da inteligentno spaja i animira elemente. To je moćan alat koji pretvara složene višestupanjske animacije u jednostavno deklarativno CSS svojstvo.

Dubinski uvid u hvatanje stanja elemenata

Iako se `view-transition-name` prvenstveno razumije po svojoj ulozi u animiranju vizualnih elemenata, njegova funkcionalnost seže daleko izvan jednostavnog vizualnog preoblikovanja. On je ključna komponenta hvatanja stanja elemenata, značajke koja omogućuje prijelazima prikaza da sačuvaju i prenesu nevizualna, interaktivna i dinamička stanja elemenata kroz prijelaze. Ovdje se prijelazi prikaza istinski razlikuju od prethodnih tehnika animacije.

Iznad vizualnog: Potreba za očuvanjem stanja

Zamislite scenarij u single-page aplikaciji (SPA) gdje korisnik ispunjava višestupanjski obrazac. Unese podatke u polje za unos, zatim navigira na drugi dio obrasca (možda stranicu sa sažetkom) i potom se vrati na prethodni korak. Bez hvatanja stanja elemenata, polje za unos bi se vjerojatno resetiralo, prisiljavajući korisnika da ponovno unese svoje podatke. Slično, zamislite dugačak popis gdje je korisnik skrolao do pola. Navigacija na detaljni prikaz i zatim povratak na popis obično bi resetirao poziciju skrolanja na vrh, prekidajući korisnikov tijek. Ovi naizgled manji problemi mogu značajno narušiti korisničko iskustvo, dovodeći do frustracije i povećanog kognitivnog opterećenja.

Tradicionalne web animacije prvenstveno su se usredotočile na vizualna svojstva poput položaja, neprozirnosti ili mjerila. Očuvanje intrinzičnih stanja elemenata — kao što su `value` inputa, `checked` stanje checkboxa, `scrollTop` ili `scrollLeft` elementa, njegovo `focus` stanje ili dinamički primijenjena CSS prilagođena svojstva — bio je složen zadatak. Programeri su morali ručno hvatati ta stanja u JavaScriptu prije ažuriranja DOM-a, a zatim ih mukotrpno ponovno primjenjivati nakon renderiranja novog prikaza. To je bilo sklono pogreškama, intenzivno za performanse i često je dovodilo do treperenja ili nedosljednosti, posebno u globalnim aplikacijama s različitim mrežnim uvjetima i mogućnostima uređaja.

Hvatanje stanja elemenata izravno rješava ovaj izazov. Povezivanjem elementa kroz prijelaz putem `view-transition-name`, preglednik ne samo da animira njegova vizualna svojstva, već i inteligentno čuva i ponovno primjenjuje određena ključna nevizualna stanja. To dovodi do mnogo robusnijeg, predvidljivijeg i ugodnijeg korisničkog iskustva, bez obzira na složenost temeljnog stanja aplikacije ili promjena DOM-a.

Kako hvatanje stanja funkcionira interno

Kada element ima `view-transition-name` i pojavljuje se i u "starom" i u "novom" stanju DOM-a, preglednik izvodi sofisticirani proces hvatanja. Ne snima samo jednostavnu snimku zaslona. Umjesto toga, stvara ono što se može smatrati "snimkom elementa" za staru i novu instancu. Ta snimka ne sadrži samo podatke o pikselima; ona također uključuje ključna svojstva koja definiraju stanje elementa.

Mehanizam hvatanja stanja usko je integriran s načinom na koji preglednik renderira i ažurira elemente. Kada se pozove `document.startViewTransition()`, preglednik učinkovito pauzira renderiranje ažuriranja DOM-a i snima početno stanje. To uključuje raspored, iscrtavanje i, što je ključno, određena semantička stanja elemenata označenih s `view-transition-name`. Nakon što je DOM ažuriran vašim JavaScriptom, snima se još jedna snimka tih istih elemenata (s istim `view-transition-name`) u njihovom novom stanju. Preglednik zatim interpolira između tih uhvaćenih stanja tijekom animacije.

Ovaj je proces visoko optimiziran. Cilj mu je minimizirati "layout thrashing" i osigurati da čak i elementi sa složenim internim stanjima mogu glatko prelaziti bez potrebe za opsežnim ručnim upravljanjem stanjem od strane programera. Ključ je u tome što preglednik hvata ta stanja *prije* ažuriranja DOM-a, omogućujući mu da ih ponovno primijeni na pseudo-elemente `::view-transition-old` ili `::view-transition-new` koji predstavljaju sadržaj u tranziciji.

Hvatanje i očuvanje korisničkog unosa

Jedna od najneposrednijih i najutjecajnijih prednosti hvatanja stanja elemenata je očuvanje korisničkog unosa unutar polja obrasca. Elementi za unos (``, ``, `<select>`) zadržavaju svoj `value` atribut kroz prijelaz ako dijele isto `view-transition-name`.</p> <p>Razmotrite korisnika koji ispunjava višedijelni obrazac za rezervaciju međunarodnog putovanja. Možda unese svoje ime, e-poštu i odredište u jednom koraku. Ako navigira kako bi pregledao svoj odabir i zatim se odluči vratiti kako bi uredio detalje, tradicionalni pristup bi vjerojatno obrisao polja obrasca nakon ponovnog renderiranja prethodnog prikaza, što bi dovelo do frustrirajućeg gubitka podataka. S `view-transition-name` i hvatanjem stanja elemenata, preglednik besprijekorno prenosi unesene vrijednosti. Korisnikov unos ostaje netaknut, pružajući istinski kontinuirano i pouzdano iskustvo ispunjavanja obrasca, što je ključno za aplikacije koje služe globalnim korisnicima gdje unos podataka može biti značajan dio radnog procesa.</p> <p>Ova mogućnost dramatično pojednostavljuje razvoj složenih obrazaca i interaktivnih komponenti, jer programeri više ne moraju pisati prilagođeni JavaScript za pohranu i vraćanje vrijednosti unosa pri promjenama prikaza.</p> <h3>Održavanje pozicija skrolanja i fokusa</h3> <p>Još jedna česta bolna točka u web navigaciji je gubitak pozicije skrolanja ili fokusa pri prijelazu između prikaza, posebno u aplikacijama s dugim sadržajem za skrolanje ili složenim interaktivnim elementima. Zamislite korisnika koji pregledava katalog proizvoda, skrolajući kroz stotine artikala. Klik na artikl za pregled detalja i zatim korištenje gumba za povratak ili prilagođenog navigacijskog elementa za povratak na katalog obično bi resetirao poziciju skrolanja, prisiljavajući korisnika da ponovno pronađe svoje mjesto. To je posebno neugodno za korisnike na mobilnim uređajima ili u regijama sa sporijim internetom, gdje ponovno skrolanje velikih lista može biti naporno.</p> <p>Hvatanje stanja elemenata, kada se primijeni na spremnik koji se može skrolati (poput `div` s `overflow: auto` ili čak samog `body`), može sačuvati njegova `scrollTop` i `scrollLeft` svojstva. Ako element koji se može skrolati ima `view-transition-name`, njegova pozicija skrolanja će se održati kroz prijelaz, osiguravajući da se korisnik, kada se vrati na taj prikaz, nađe točno tamo gdje je stao. Slično tome, ako je element bio u fokusu (npr. polje za unos ili gumb), njegovo `focus` stanje također se može sačuvati, poboljšavajući navigaciju tipkovnicom i pristupačnost, što je ključno razmatranje za globalne korisnike s različitim metodama unosa i potrebama za pristupačnošću.</p> <h3>Očuvanje dinamičkih CSS svojstava i prilagođenih svojstava</h3> <p>Web je sve dinamičniji, s elementima čiji se stilovi često manipuliraju JavaScriptom ili reagiraju na korisničke interakcije. CSS prilagođena svojstva (varijable) su ključna za upravljanje ovim dinamičkim stilovima. Hvatanje stanja elemenata proteže se i na njih. Ako se stil elementa, uključujući njegova CSS prilagođena svojstva, promijeni tijekom prijelaza i ima `view-transition-name`, ti se stilovi hvataju.</p> <p>To znači da ako koristite CSS varijable za kontrolu teme aplikacije (npr. svijetli/tamni način) ili za upravljanje stanjima specifičnim za komponente (npr. visina proširenog harmonika elementa), preglednik može održati te vrijednosti tijekom prijelaza. Na primjer, ako se `transform` svojstvo komponente prilagođava putem CSS varijable, hvatanje osigurava da se vizualna transformacija nastavlja glatko kroz prijelaz prikaza, umjesto da se naglo vrati na zadanu vrijednost prije nego što novi prikaz primijeni svoje stilove. To omogućuje programerima stvaranje vrlo sofisticiranih, podacima vođenih animacija s manje truda, dopuštajući jedinstveno brendiranje i dosljednost korisničkog sučelja na međunarodnim tržištima.</p> <h3>Stanje SVG i Canvas elemenata</h3> <p>Za aplikacije koje se uvelike oslanjaju na bogatu grafiku, interaktivne grafikone ili prilagođene vizualizacije, prijelazi prikaza također mogu olakšati hvatanje stanja za složene elemente poput SVG-a i Canvasa. Iako se cjelokupno interno stanje Canvasa obično ne hvata (jer je u suštini bitmapa), DOM atributi i stilovi SVG elementa jesu. Ako SVG element ima dinamičke atribute ili stilove koji se mijenjaju između stanja prikaza i ima `view-transition-name`, te se promjene mogu glatko animirati.</p> <p>Na primjer, ako imate SVG ikonu koja mijenja boju ili oblik na temelju korisničke interakcije, a ta se ikona premješta na drugi dio zaslona, njezino vizualno stanje (boja, debljina poteza, transformacija) može se uhvatiti i animirati. To otvara nove mogućnosti za stvaranje vizualno bogatih i interaktivnih nadzornih ploča, sučelja za igre ili obrazovnog sadržaja koji trebaju glatko prelaziti složenu grafiku bez napornog ponovnog renderiranja JavaScriptom ili treperenja, pružajući dosljedno iskustvo na bilo kojem uređaju, bilo gdje u svijetu.</p> <h3>Hvatanje stanja upravljanih JavaScriptom</h3> <p>Iako prijelazi prikaza rješavaju mnogo toga deklarativno, još uvijek postoji prostor za JavaScript da utječe i poboljša proces hvatanja. Programeri mogu izvoditi radnje neposredno prije nego što preglednik snimi "staru" snimku ili nakon što je "novi" DOM renderiran, ali prije nego što se snimi njegova snimka. To omogućuje granularniju kontrolu nad time koja se specifična stanja hvataju ili kako se elementi pripremaju za prijelaz.</p> <p>Na primjer, možda želite prisiliti određeno CSS prilagođeno svojstvo na određenu vrijednost neposredno prije stare snimke kako biste osigurali specifično početno stanje animacije. Ili, nakon što je novi DOM renderiran, možete prilagoditi stanje elementa na temelju neke logike aplikacije prije nego što se snimi konačna snimka, osiguravajući da animacija ispravno odražava namjeravano krajnje stanje. Ova interakcija između CSS-a i JavaScripta nudi maksimalnu fleksibilnost programerima za fino podešavanje prijelaza i očuvanja stanja prema specifičnim zahtjevima njihove aplikacije, čineći je prilagodljivom različitim UI obrascima i modelima interakcije globalno.</p> <h2>Pseudo-elementi prijelaza prikaza i njihova uloga u hvatanju stanja</h2> <p>Razumijevanje kako preglednik koristi pseudo-elemente tijekom prijelaza prikaza ključno je za prilagodbu animacije i cijenjenje dubine hvatanja stanja. Kada se dogodi prijelaz prikaza, preglednik ne animira samo stvarne DOM elemente izravno. Umjesto toga, stvara privremenu, slojevitu strukturu pseudo-elemenata koji predstavljaju staro i novo stanje. Ti pseudo-elementi su mjesto gdje se uhvaćena stanja manifestiraju i animiraju.</p> <h3><code>::view-transition</code>: Globalni spremnik</h3> <p>Pseudo-element `::view-transition` je spremnik najviše razine za sve animacije prijelaza prikaza. On obuhvaća cijeli proces prijelaza. Možete ciljati ovaj pseudo-element kako biste primijenili globalne stilove ili animacije koje utječu na cijeli prijelaz, kao što je efekt fade-in ili fade-out za cijelu stranicu, ili za postavljanje CSS prilagođenih svojstava koja kontroliraju različite aspekte vremena ili trajanja prijelaza. Iako ne hvata izravno stanja specifična za elemente, pruža kontekst unutar kojeg se odvijaju svi ostali uhvaćeni elementi i njihove animacije.</p> <p>Na primjer, primjena `animation-duration` na `::view-transition` osigurava da se svi kasniji pseudo-elementi vezani uz prijelaz pridržavaju ovog globalnog vremena, stvarajući jedinstveno i predvidljivo korisničko iskustvo u različitim regijama i na različitim uređajima.</p> <h3><code>::view-transition-group(...)</code>: Upravljanje neovisnim elementima</h3> <p>Za svaki element kojem je dodijeljen `view-transition-name`, preglednik stvara pseudo-element `::view-transition-group(...)`. Ova grupa djeluje kao spremnik za snimku tog specifičnog imenovanog elementa. Dio `(...)` sadrži ime koje ste dodijelili (npr. `::view-transition-group(my-hero-image)`). Ovaj pseudo-element prvenstveno hvata geometriju elementa (položaj i veličinu) i omogućuje vam animiranje tih svojstava tijekom prijelaza.</p> <p>Sam `::view-transition-group` ne sadrži izravno `value` inputa ili `scrollTop` područja za skrolanje. Umjesto toga, osigurava da se vizualni prikaz elementa, uključujući bilo koja uhvaćena stanja unutar njegovog `::view-transition-image-pair`, ispravno kreće i mijenja veličinu. On je voditelj pozornice za prijelaze pojedinačnih elemenata, osiguravajući da se svaki imenovani element glatko kreće sa svoje stare na novu poziciju, održavajući iluziju jednog kontinuiranog elementa.</p> <h3><code>::view-transition-image-pair(...)</code>: Staro i novo</h3> <p>Unutar svakog `::view-transition-group(...)`, preglednik stvara pseudo-element `::view-transition-image-pair(...)`. Ovaj pseudo-element je skup dva druga pseudo-elementa: `::view-transition-old(...)` i `::view-transition-new(...)`. `image-pair` je odgovoran za rukovanje unakrsnim iščezavanjem (cross-fading) ili miješanjem između starog i novog vizualnog stanja elementa. To je kritična točka gdje vizualni aspekt hvatanja stanja dolazi do izražaja.</p> <p>Prema zadanim postavkama, `::view-transition-old` iščezava, a `::view-transition-new` se pojavljuje, stvarajući glatki efekt unakrsnog iščezavanja. Programeri mogu ciljati `image-pair` kako bi prilagodili ovo ponašanje, na primjer, tako da jedan klizi van, a drugi klizi unutra, ili primjenom složenijih načina miješanja. Unutar ovog para prikazuje se i animira vizualni prikaz uhvaćenih *podataka* (poput vrijednosti unosa ili pozicija skrolanja).</p> <h3><code>::view-transition-old(...)</code>: Odlazeća snimka</h3> <p>Ovaj pseudo-element predstavlja snimku elementa kako je izgledao *prije* ažuriranja DOM-a. To je ono što korisnik u početku vidi kako iščezava. Ključno je da, ako je izvorni element imao intrinzično stanje (poput vrijednosti unosa ili pozicije skrolanja) koje je uhvaćeno, to stanje se odražava u vizualnom prikazu ovog pseudo-elementa. Na primjer, ako je uhvaćeno polje za unos s tekstom, `::view-transition-old` će prikazati taj tekst kao dio svoje snimke.</p> <p>Možete primijeniti CSS animacije na `::view-transition-old` kako biste kontrolirali kako odlazeći element nestaje. Prema zadanim postavkama, on iščezava, ali možete ga animirati da klizi, mijenja mjerilo ili primijeniti bilo koju drugu CSS transformaciju. To pruža granularnu kontrolu nad animacijom oproštaja starog stanja, osiguravajući da se savršeno integrira s cjelokupnim korisničkim iskustvom.</p> <h3><code>::view-transition-new(...)</code>: Dolazeća snimka</h3> <p>Nasuprot tome, `::view-transition-new(...)` predstavlja snimku elementa *nakon* ažuriranja DOM-a. To je ono što korisnik vidi kako se pojavljuje ili animira na svoje mjesto. Poput svog pandana, ako je izvorni element imao uhvaćeno stanje, `::view-transition-new` će prikazati to stanje. Na primjer, ako se vrijednost polja za unos promijenila tijekom ažuriranja DOM-a (ili je sačuvana iz starog stanja), `::view-transition-new` će prikazati ažuriranu ili sačuvanu vrijednost.</p> <p>Ovaj pseudo-element također se može animirati CSS-om kako bi se kontroliralo kako se novi element pojavljuje. Prema zadanim postavkama, on se pojavljuje, ali može se prilagoditi da klizi, mijenja mjerilo ili se transformira u kombinaciji s `::view-transition-old` kako bi se stvorio doista prilagođen prijelaz. Sposobnost manipuliranja i starim i novim snimkama pomoću CSS animacija je ono što programerima daje ogromnu moć za stvaranje jedinstvenih i privlačnih UI iskustava, osiguravajući da se dosljednost brenda i jezik dizajna održavaju, bez obzira na lokaciju ili uređaj korisnika.</p> <h2>Praktične implementacije i primjeri koda</h2> <p>Kako bismo u potpunosti cijenili moć hvatanja stanja elemenata, istražimo neke praktične primjere. Ovi su scenariji uobičajeni u modernim web aplikacijama i ilustriraju kako prijelazi prikaza pojednostavljuju prethodno složene zadatke animacije i upravljanja stanjem.</p> <h3>Osnovna postava za prijelaz prikaza</h3> <p>Temeljni korak za omogućavanje bilo kojeg prijelaza prikaza je omotavanje ažuriranja DOM-a u `document.startViewTransition()`:</p> <div class="code-block-wrapper"> <pre data-language="code"> <code>// In your JavaScript file function updateDOM() { // Your code to update the DOM goes here // e.g., changing innerHTML, adding/removing elements, updating styles document.getElementById('content').innerHTML = ` <h2>New Content</h2> <p>This is the refreshed content.</p> `; } // Trigger the view transition document.startViewTransition(() => updateDOM()); </code> <div class="copy-button-container"> <button data-code="Ly8gSW4geW91ciBKYXZhU2NyaXB0IGZpbGUKZnVuY3Rpb24gdXBkYXRlRE9NKCkgewogIC8vIFlvdXIgY29kZSB0byB1cGRhdGUgdGhlIERPTSBnb2VzIGhlcmUKICAvLyBlLmcuLCBjaGFuZ2luZyBpbm5lckhUTUwsIGFkZGluZy9yZW1vdmluZyBlbGVtZW50cywgdXBkYXRpbmcgc3R5bGVzCiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NvbnRlbnQnKS5pbm5lckhUTUwgPSBgCiAgICA8aDI+TmV3IENvbnRlbnQ8L2gyPgogICAgPHA+VGhpcyBpcyB0aGUgcmVmcmVzaGVkIGNvbnRlbnQuPC9wPgogIGA7Cn0KCi8vIFRyaWdnZXIgdGhlIHZpZXcgdHJhbnNpdGlvbgpkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHVwZGF0ZURPTSgpKTsK" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p>Ovaj jednostavan obrazac govori pregledniku: "Spremam se promijeniti DOM. Molim te, uhvati staro stanje, primijeni moje promjene, zatim uhvati novo stanje i animiraj između njih." Čarolija hvatanja stanja događa se kada se `view-transition-name` primijeni na specifične elemente unutar `updateDOM()` ili na elemente koji postoje u oba stanja.</p> <h3>Primjer 1: Očuvanje stanja unosa u obrascu</h3> <p>Razmotrimo scenarij u kojem korisnik ispunjava polje za unos, a zatim se dio stranice dinamički mijenja, ali polje za unos ostaje. Želimo da vrijednost unosa bude sačuvana.</p> <h4>HTML struktura:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="app-container"> <div id="dynamic-content"> <p>Initial page content.</p> </div> <input type="text" id="my-input" placeholder="Enter something..."> <button id="update-button">Update Content</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPGRpdiBpZD0iZHluYW1pYy1jb250ZW50Ij4KICAgIDxwPkluaXRpYWwgcGFnZSBjb250ZW50LjwvcD4KICA8L2Rpdj4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im15LWlucHV0IiBwbGFjZWhvbGRlcj0iRW50ZXIgc29tZXRoaW5nLi4uIj4KICA8YnV0dG9uIGlkPSJ1cGRhdGUtYnV0dG9uIj5VcGRhdGUgQ29udGVudDwvYnV0dG9uPgo8L2Rpdj4K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS s <code>view-transition-name</code>:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Assign a view-transition-name to the input element */ #my-input { view-transition-name: input-field-id; border: 1px solid #ccc; padding: 8px; width: 250px; border-radius: 4px; } /* Optional: Add some basic styling for the transition */ ::view-transition-old(input-field-id), ::view-transition-new(input-field-id) { animation-duration: 0.3s; animation-timing-function: ease-in-out; } ::view-transition-old(input-field-id) { animation-name: fade-out; } ::view-transition-new(input-field-id) { animation-name: fade-in; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } </code> <div class="copy-button-container"> <button data-code="LyogQXNzaWduIGEgdmlldy10cmFuc2l0aW9uLW5hbWUgdG8gdGhlIGlucHV0IGVsZW1lbnQgKi8KI215LWlucHV0IHsKICB2aWV3LXRyYW5zaXRpb24tbmFtZTogaW5wdXQtZmllbGQtaWQ7CiAgYm9yZGVyOiAxcHggc29saWQgI2NjYzsKICBwYWRkaW5nOiA4cHg7CiAgd2lkdGg6IDI1MHB4OwogIGJvcmRlci1yYWRpdXM6IDRweDsKfQoKLyogT3B0aW9uYWw6IEFkZCBzb21lIGJhc2ljIHN0eWxpbmcgZm9yIHRoZSB0cmFuc2l0aW9uICovCjo6dmlldy10cmFuc2l0aW9uLW9sZChpbnB1dC1maWVsZC1pZCksCjo6dmlldy10cmFuc2l0aW9uLW5ldyhpbnB1dC1maWVsZC1pZCkgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4zczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQoKOjp2aWV3LXRyYW5zaXRpb24tb2xkKGlucHV0LWZpZWxkLWlkKSB7CiAgYW5pbWF0aW9uLW5hbWU6IGZhZGUtb3V0Owp9Cgo6OnZpZXctdHJhbnNpdGlvbi1uZXcoaW5wdXQtZmllbGQtaWQpIHsKICBhbmltYXRpb24tbmFtZTogZmFkZS1pbjsKfQoKQGtleWZyYW1lcyBmYWRlLW91dCB7CiAgZnJvbSB7IG9wYWNpdHk6IDE7IH0KICB0byB7IG9wYWNpdHk6IDA7IH0KfQoKQGtleWZyYW1lcyBmYWRlLWluIHsKICBmcm9tIHsgb3BhY2l0eTogMDsgfQogIHRvIHsgb3BhY2l0eTogMTsgfQp9Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript za pokretanje prijelaza:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>document.getElementById('update-button').addEventListener('click', () => { document.startViewTransition(() => { const dynamicContent = document.getElementById('dynamic-content'); // Simulate changing content around the input dynamicContent.innerHTML = ` <h3>Content Updated!</h3> <p>This section has been refreshed, but your input remains.</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> `; }); }); </code> <div class="copy-button-container"> <button data-code="ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3VwZGF0ZS1idXR0b24nKS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHsKICAgIGNvbnN0IGR5bmFtaWNDb250ZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2R5bmFtaWMtY29udGVudCcpOwogICAgLy8gU2ltdWxhdGUgY2hhbmdpbmcgY29udGVudCBhcm91bmQgdGhlIGlucHV0CiAgICBkeW5hbWljQ29udGVudC5pbm5lckhUTUwgPSBgCiAgICAgIDxoMz5Db250ZW50IFVwZGF0ZWQhPC9oMz4KICAgICAgPHA+VGhpcyBzZWN0aW9uIGhhcyBiZWVuIHJlZnJlc2hlZCwgYnV0IHlvdXIgaW5wdXQgcmVtYWlucy48L3A+CiAgICAgIDx1bD4KICAgICAgICA8bGk+SXRlbSAxPC9saT4KICAgICAgICA8bGk+SXRlbSAyPC9saT4KICAgICAgPC91bD4KICAgIGA7CiAgfSk7Cn0pOwo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Objašnjenje očuvanja stanja:</strong> U ovom primjeru, iako je sadržaj u `#dynamic-content` u potpunosti zamijenjen, tekst unesen u `#my-input` ostaje. Budući da `#my-input` ima `view-transition-name: input-field-id`, preglednik ga prepoznaje kao postojan element. On hvata `value` unosa prije ažuriranja DOM-a i ponovno ga primjenjuje nakon ažuriranja, čak i ako su se roditelj ili susjedni elementi promijenili. Ovo je revolucionarno za obrasce i interaktivne komponente, osiguravajući dosljedno korisničko iskustvo bez obzira na dinamičku prirodu okolnog korisničkog sučelja.</p> <h3>Primjer 2: Dinamički sadržaj s hvatanjem stanja (Promjena redoslijeda liste)</h3> <p>Zamislite listu stavki koja se može sortirati, gdje klik na gumb mijenja njihov redoslijed. Želimo da se promjena redoslijeda glatko animira, ali i da se sačuva bilo kakvo stanje fokusa ili interakcije unutar stavki liste ako one ostanu u listi.</p> <h4>HTML struktura:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="app-container"> <ul id="item-list"> <li class="list-item" data-id="1">Item A</li> <li class="list-item" data-id="2">Item B</li> <li class="list-item" data-id="3">Item C</li> </ul> <button id="sort-button">Sort List (Reverse)</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPHVsIGlkPSJpdGVtLWxpc3QiPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjEiPkl0ZW0gQTwvbGk+CiAgICA8bGkgY2xhc3M9Imxpc3QtaXRlbSIgZGF0YS1pZD0iMiI+SXRlbSBCPC9saT4KICAgIDxsaSBjbGFzcz0ibGlzdC1pdGVtIiBkYXRhLWlkPSIzIj5JdGVtIEM8L2xpPgogIDwvdWw+CiAgPGJ1dHRvbiBpZD0ic29ydC1idXR0b24iPlNvcnQgTGlzdCAoUmV2ZXJzZSk8L2J1dHRvbj4KPC9kaXY+Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS (s dinamičkim <code>view-transition-name</code>):</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Each list item will get a unique view-transition-name via JS */ .list-item { padding: 10px; margin-bottom: 5px; background-color: #f0f0f0; border-radius: 4px; } /* Customize animations for individual list items */ ::view-transition-group(item-*) { animation-duration: 0.5s; animation-timing-function: ease-in-out; } ::view-transition-old(item-*) { animation-name: fade-out-move; z-index: 1; } ::view-transition-new(item-*) { animation-name: fade-in-move; z-index: 2; } @keyframes fade-out-move { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } } @keyframes fade-in-move { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } to { opacity: 1; transform: translate(0, 0); } } </code> <div class="copy-button-container"> <button data-code="LyogRWFjaCBsaXN0IGl0ZW0gd2lsbCBnZXQgYSB1bmlxdWUgdmlldy10cmFuc2l0aW9uLW5hbWUgdmlhIEpTICovCi5saXN0LWl0ZW0gewogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luLWJvdHRvbTogNXB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgYm9yZGVyLXJhZGl1czogNHB4Owp9CgovKiBDdXN0b21pemUgYW5pbWF0aW9ucyBmb3IgaW5kaXZpZHVhbCBsaXN0IGl0ZW1zICovCjo6dmlldy10cmFuc2l0aW9uLWdyb3VwKGl0ZW0tKikgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC41czsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQoKOjp2aWV3LXRyYW5zaXRpb24tb2xkKGl0ZW0tKikgewogIGFuaW1hdGlvbi1uYW1lOiBmYWRlLW91dC1tb3ZlOwogIHotaW5kZXg6IDE7Cn0KCjo6dmlldy10cmFuc2l0aW9uLW5ldyhpdGVtLSopIHsKICBhbmltYXRpb24tbmFtZTogZmFkZS1pbi1tb3ZlOwogIHotaW5kZXg6IDI7Cn0KCkBrZXlmcmFtZXMgZmFkZS1vdXQtbW92ZSB7CiAgZnJvbSB7IG9wYWNpdHk6IDE7IHRyYW5zZm9ybTogdHJhbnNsYXRlKDAsIDApOyB9CiAgdG8geyBvcGFjaXR5OiAwOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZSh2YXIoLS1keCwgMCksIHZhcigtLWR5LCAwKSk7IH0KfQoKQGtleWZyYW1lcyBmYWRlLWluLW1vdmUgewogIGZyb20geyBvcGFjaXR5OiAwOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZSh2YXIoLS1keCwgMCksIHZhcigtLWR5LCAwKSk7IH0KICB0byB7IG9wYWNpdHk6IDE7IHRyYW5zZm9ybTogdHJhbnNsYXRlKDAsIDApOyB9Cn0K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript za dinamički <code>view-transition-name</code> i promjenu redoslijeda:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>const itemList = document.getElementById('item-list'); const sortButton = document.getElementById('sort-button'); function applyViewTransitionNames() { const items = itemList.querySelectorAll('.list-item'); items.forEach(item => { // Dynamically assign view-transition-name based on data-id item.style.viewTransitionName = `item-${item.dataset.id}`; }); } // Apply names initially applyViewTransitionNames(); sortButton.addEventListener('click', () => { document.startViewTransition(() => { // Get current items and reverse their order const itemsArray = Array.from(itemList.children); itemsArray.reverse().forEach(item => itemList.appendChild(item)); // No need to re-apply view-transition-name if already set }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3QgaXRlbUxpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnaXRlbS1saXN0Jyk7CmNvbnN0IHNvcnRCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc29ydC1idXR0b24nKTsKCmZ1bmN0aW9uIGFwcGx5Vmlld1RyYW5zaXRpb25OYW1lcygpIHsKICBjb25zdCBpdGVtcyA9IGl0ZW1MaXN0LnF1ZXJ5U2VsZWN0b3JBbGwoJy5saXN0LWl0ZW0nKTsKICBpdGVtcy5mb3JFYWNoKGl0ZW0gPT4gewogICAgLy8gRHluYW1pY2FsbHkgYXNzaWduIHZpZXctdHJhbnNpdGlvbi1uYW1lIGJhc2VkIG9uIGRhdGEtaWQKICAgIGl0ZW0uc3R5bGUudmlld1RyYW5zaXRpb25OYW1lID0gYGl0ZW0tJHtpdGVtLmRhdGFzZXQuaWR9YDsKICB9KTsKfQoKLy8gQXBwbHkgbmFtZXMgaW5pdGlhbGx5CmFwcGx5Vmlld1RyYW5zaXRpb25OYW1lcygpOwoKc29ydEJ1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHsKICAgIC8vIEdldCBjdXJyZW50IGl0ZW1zIGFuZCByZXZlcnNlIHRoZWlyIG9yZGVyCiAgICBjb25zdCBpdGVtc0FycmF5ID0gQXJyYXkuZnJvbShpdGVtTGlzdC5jaGlsZHJlbik7CiAgICBpdGVtc0FycmF5LnJldmVyc2UoKS5mb3JFYWNoKGl0ZW0gPT4gaXRlbUxpc3QuYXBwZW5kQ2hpbGQoaXRlbSkpOwogICAgLy8gTm8gbmVlZCB0byByZS1hcHBseSB2aWV3LXRyYW5zaXRpb24tbmFtZSBpZiBhbHJlYWR5IHNldAogIH0pOwp9KTsK" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Objašnjenje:</strong> Svaka stavka liste dobiva jedinstveno `view-transition-name` na temelju svog `data-id`. Kada se lista obrne, sami DOM elementi se preslažu. Budući da `view-transition-name` ostaje dosljedan za jedinstveni ID svake stavke, preglednik hvata staru poziciju i zatim animira stavku na njezinu novu poziciju. Ako bi ove stavke liste sadržavale složene interaktivne elemente (npr. preklopnike, mini-obrasce), njihova interna stanja također bi bila sačuvana tijekom preslagivanja, čineći interakciju robusnom i besprijekornom za korisnika, bez obzira na to koliko je stavki u listi ili gdje se korisnik geografski nalazi.</p> <h3>Primjer 3: Ovladavanje hvatanjem pozicije skrolanja</h3> <p>Razmotrite područje sa sadržajem koje se može skrolati unutar nadzorne ploče. Kada korisnik filtrira sadržaj, unutarnji sadržaj se mijenja, ali želimo da pozicija skrolanja filtriranog područja bude sačuvana ako je korisnik skrolao prema dolje.</p> <h4>HTML struktura:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="dashboard-layout"> <nav>...</nav> <main id="scrollable-content"> <div class="filters"> <button id="filter-btn">Apply Filter</button> </div> <div id="data-display"> <!-- Lots of dynamically generated content --> <p>Content Line 1</p><p>Content Line 2</p>...<p>Content Line 100</p> </div> </main> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iZGFzaGJvYXJkLWxheW91dCI+CiAgPG5hdj4uLi48L25hdj4KICA8bWFpbiBpZD0ic2Nyb2xsYWJsZS1jb250ZW50Ij4KICAgIDxkaXYgY2xhc3M9ImZpbHRlcnMiPgogICAgICA8YnV0dG9uIGlkPSJmaWx0ZXItYnRuIj5BcHBseSBGaWx0ZXI8L2J1dHRvbj4KICAgIDwvZGl2PgogICAgPGRpdiBpZD0iZGF0YS1kaXNwbGF5Ij4KICAgICAgPCEtLSBMb3RzIG9mIGR5bmFtaWNhbGx5IGdlbmVyYXRlZCBjb250ZW50IC0tPgogICAgICA8cD5Db250ZW50IExpbmUgMTwvcD48cD5Db250ZW50IExpbmUgMjwvcD4uLi48cD5Db250ZW50IExpbmUgMTAwPC9wPgogICAgPC9kaXY+CiAgPC9tYWluPgo8L2Rpdj4K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS za omogućavanje skrolanja sadržaja i primjenu <code>view-transition-name</code>:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>#dashboard-layout { display: flex; height: 100vh; } #scrollable-content { flex-grow: 1; overflow-y: auto; /* Make it scrollable */ padding: 20px; view-transition-name: main-content-scroll; /* The key for scroll state capture */ } #data-display p { margin-bottom: 10px; padding: 5px; background-color: #e6e6e6; border-radius: 3px; } /* Default View Transition animations */ ::view-transition-old(main-content-scroll), ::view-transition-new(main-content-scroll) { animation-duration: 0.3s; } </code> <div class="copy-button-container"> <button data-code="I2Rhc2hib2FyZC1sYXlvdXQgewogIGRpc3BsYXk6IGZsZXg7CiAgaGVpZ2h0OiAxMDB2aDsKfQoKI3Njcm9sbGFibGUtY29udGVudCB7CiAgZmxleC1ncm93OiAxOwogIG92ZXJmbG93LXk6IGF1dG87IC8qIE1ha2UgaXQgc2Nyb2xsYWJsZSAqLwogIHBhZGRpbmc6IDIwcHg7CiAgdmlldy10cmFuc2l0aW9uLW5hbWU6IG1haW4tY29udGVudC1zY3JvbGw7CiAgLyogVGhlIGtleSBmb3Igc2Nyb2xsIHN0YXRlIGNhcHR1cmUgKi8KfQoKI2RhdGEtZGlzcGxheSBwIHsKICBtYXJnaW4tYm90dG9tOiAxMHB4OwogIHBhZGRpbmc6IDVweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTZlNmU2OwogIGJvcmRlci1yYWRpdXM6IDNweDsKfQoKLyogRGVmYXVsdCBWaWV3IFRyYW5zaXRpb24gYW5pbWF0aW9ucyAqLwo6OnZpZXctdHJhbnNpdGlvbi1vbGQobWFpbi1jb250ZW50LXNjcm9sbCksCjo6dmlldy10cmFuc2l0aW9uLW5ldyhtYWluLWNvbnRlbnQtc2Nyb2xsKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjNzOwp9Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript za pokretanje filtriranja i ažuriranja sadržaja:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>const scrollableContent = document.getElementById('scrollable-content'); const dataDisplay = document.getElementById('data-display'); const filterButton = document.getElementById('filter-btn'); let filtered = false; function generateContent(isFiltered) { let content = ''; const totalLines = 100; for (let i = 1; i <= totalLines; i++) { if (!isFiltered || i % 2 === 0) { // Only show even lines when filtered content += `<p>Content Line ${i} ${isFiltered ? '(Filtered)' : ''}</p>`; } } return content; } // Initial content load dataDisplay.innerHTML = generateContent(filtered); filterButton.addEventListener('click', () => { document.startViewTransition(() => { filtered = !filtered; // Toggle filter state dataDisplay.innerHTML = generateContent(filtered); }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3Qgc2Nyb2xsYWJsZUNvbnRlbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2Nyb2xsYWJsZS1jb250ZW50Jyk7CmNvbnN0IGRhdGFEaXNwbGF5ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RhdGEtZGlzcGxheScpOwpjb25zdCBmaWx0ZXJCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZmlsdGVyLWJ0bicpOwoKbGV0IGZpbHRlcmVkID0gZmFsc2U7CgpmdW5jdGlvbiBnZW5lcmF0ZUNvbnRlbnQoaXNGaWx0ZXJlZCkgewogIGxldCBjb250ZW50ID0gJyc7CiAgY29uc3QgdG90YWxMaW5lcyA9IDEwMDsKICBmb3IgKGxldCBpID0gMTsgaSA8PSB0b3RhbExpbmVzOyBpKyspIHsKICAgIGlmICghaXNGaWx0ZXJlZCB8fCBpICUgMiA9PT0gMCkgeyAvLyBPbmx5IHNob3cgZXZlbiBsaW5lcyB3aGVuIGZpbHRlcmVkCiAgICAgIGNvbnRlbnQgKz0gYDxwPkNvbnRlbnQgTGluZSAke2l9ICR7aXNGaWx0ZXJlZCA/ICcoRmlsdGVyZWQpJyA6ICcnfTwvcD5gOwogICAgfQogIH0KICByZXR1cm4gY29udGVudDsKfQoKLy8gSW5pdGlhbCBjb250ZW50IGxvYWQKZGF0YURpc3BsYXkuaW5uZXJIVE1MID0gZ2VuZXJhdGVDb250ZW50KGZpbHRlcmVkKTsKCmZpbHRlckJ1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHsKICAgIGZpbHRlcmVkID0gIWZpbHRlcmVkOyAvLyBUb2dnbGUgZmlsdGVyIHN0YXRlCiAgICBkYXRhRGlzcGxheS5pbm5lckhUTUwgPSBnZW5lcmF0ZUNvbnRlbnQoZmlsdGVyZWQpOwogIH0pOwp9KTsK" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Objašnjenje:</strong> Kada se klikne gumb "Apply Filter", sadržaj `data-display` se u potpunosti regenerira. Međutim, budući da roditeljski `scrollable-content` div ima `view-transition-name: main-content-scroll`, njegova `scrollTop` pozicija se hvata i održava. Ako je korisnik skrolao dolje prije klika na filter, ostat će na istoj relativnoj poziciji skrolanja nakon ažuriranja sadržaja, pružajući glatko i neprekinuto iskustvo pregledavanja, što je posebno vrijedno za aplikacije s velikom količinom podataka koje koriste profesionalci diljem svijeta.</p> <h2>Napredne tehnike i najbolje prakse</h2> <p>Učinkovito korištenje hvatanja stanja elemenata uključuje više od samog primjenjivanja `view-transition-name`. Promišljena implementacija i pridržavanje najboljih praksi osiguravaju da su vaši prijelazi učinkoviti, pristupačni i da istinski poboljšavaju korisničko iskustvo.</p> <h3>Orkestriranje složenih prijelaza</h3> <p>Iako `view-transition-name` pojednostavljuje mnoge scenarije, složena korisnička sučelja često zahtijevaju nijansiraniju orkestraciju. Možete kombinirati prijelaze prikaza s tradicionalnim CSS animacijama i JavaScriptom kako biste stvorili višestupanjske prijelaze:</p> <ul> <li><b>Ulančavanje animacija:</b> Možete koristiti `animation-delay` na različitim `::view-transition-*` pseudo-elementima ili čak na elementima unutar njih kako biste stvorili postupne animacije. Na primjer, "hero" slika se može animirati prva, nakon čega slijedi tekstualni sadržaj koji klizi unutra.</li> <li><b>Prilagođene funkcije vremena:</b> Osim `ease-in-out`, istražite prilagođene `cubic-bezier()` funkcije kako biste svojim animacijama dali jedinstven osjećaj koji se podudara s globalnim jezikom dizajna vašeg brenda.</li> <li><b>Dinamički `view-transition-name`:</b> Kao što je prikazano u primjeru preslagivanja liste, `view-transition-name` se može dinamički dodavati i uklanjati pomoću JavaScripta. To je moćno za elemente koji se pojavljuju, nestaju ili mijenjaju uloge unutar korisničkog sučelja. Osigurajte da su imena jedinstvena u cijelom dokumentu tijekom prijelaza.</li> </ul> <h3>Razmatranja o performansama</h3> <p>Prijelazi prikaza dizajnirani su da budu učinkoviti, prebacujući posao na optimizirani cjevovod za renderiranje preglednika. Međutim, neka razmatranja i dalje ostaju:</p> <ul> <li><b>Minimizirajte prijelaze velikih elemenata:</b> Iako prijelazi prikaza učinkovito rukuju snimkama, animiranje izuzetno velikih ili brojnih elemenata i dalje može utjecati na performanse. Koristite `view-transition-name` promišljeno, prvenstveno na elementima koji zaista imaju koristi od jedinstvenog prijelaza.</li> <li><b>Izbjegavajte pretjerane promjene DOM-a:</b> Iako prijelazi prikaza odvajaju animaciju od ažuriranja DOM-a, masivne, neoptimizirane promjene DOM-a unutar `startViewTransition()` povratne funkcije i dalje mogu uzrokovati kratko kašnjenje prije početka prijelaza. Optimizirajte svoja ažuriranja DOM-a za brzinu.</li> <li><b>Hardversko ubrzanje:</b> Osigurajte animiranje svojstava (poput `transform` i `opacity`) koja imaju koristi od hardverskog ubrzanja. Prijelazi prikaza inherentno to koriste, ali je dobro biti svjestan toga kod prilagođenih animacija.</li> <li><b>Testiranje na različitim uređajima:</b> Uvijek testirajte svoje prijelaze na nizu uređaja, od vrhunskih stolnih računala do mobilnih uređaja slabije snage, kako biste osigurali glatko iskustvo za svoju globalnu korisničku bazu.</li> </ul> <h3>Implikacije na pristupačnost</h3> <p>Prekrasan prijelaz je učinkovit samo ako je pristupačan svim korisnicima. Hvatanje stanja elemenata igra ulogu u tome, ali i drugi aspekti zahtijevaju pažnju:</p> <ul> <li><b><code>prefers-reduced-motion</code>:</b> Uvijek poštujte korisnikovu postavku `prefers-reduced-motion`. CSS prijelazi prikaza pružaju automatski način za onemogućavanje animacija za korisnike koji preferiraju manje kretanja. Osigurajte da i vaše prilagođene CSS animacije za `::view-transition-*` također poštuju ovaj media query.</li> <li><b>Upravljanje fokusom:</b> Iako se stanja skrolanja i unosa hvataju, eksplicitno upravljanje fokusom može biti ključno. Nakon prijelaza prikaza, osigurajte da fokus tipkovnice sleti na logičan element u novom prikazu. Na primjer, ako navigirate na novu stranicu, postavite fokus na glavni naslov.</li> <li><b>Semantički HTML:</b> Nastavite koristiti semantički HTML. Prijelazi prikaza najbolje funkcioniraju kada je temeljna struktura logična i pristupačna, omogućujući pomoćnim tehnologijama da ispravno interpretiraju sadržaj bez obzira na vizualne animacije.</li> <li><b>Jasan feedback:</b> Čak i uz glatke prijelaze, pružite jasan vizualni i auditivni feedback za radnje, posebno za korisnike koji mogu imati kognitivna oštećenja ili koriste čitače zaslona.</li> </ul> <h3>Cross-browser kompatibilnost i rezervna rješenja</h3> <p>CSS prijelazi prikaza su relativno nova značajka. Iako su široko podržani u preglednicima temeljenim na Chromiumu, podrška u drugim preglednicima (poput Firefoxa i Safarija) se aktivno razvija. Za globalnu publiku, robusna strategija uključuje progresivno poboljšanje:</p> <ul> <li><b>Detekcija značajke:</b> Koristite `if (document.startViewTransition)` za uvjetnu primjenu prijelaza prikaza. Ako nisu podržani, vaša bi aplikacija i dalje trebala ispravno funkcionirati, iako s manje animiranim iskustvom.</li> <li><b>Graciozna degradacija:</b> Dizajnirajte svoju aplikaciju tako da savršeno radi bez prijelaza prikaza. Prijelazi bi trebali poboljšati, a ne biti ključni za osnovnu funkcionalnost.</li> <li><b>Polyfills (Oprez):</b> Iako postoje polyfills za neke značajke animacije, pravi polyfill za duboko snimanje DOM-a i hvatanje stanja prijelaza prikaza je složen i često nepraktičan. Usredotočite se na nativnu detekciju značajki.</li> </ul> <h3>Debugiranje prijelaza prikaza</h3> <p>Moderni alati za programere u preglednicima nude izvrsnu podršku za debugiranje prijelaza prikaza:</p> <ul> <li><b>Elements Panel:</b> Pregledajte `::view-transition` pseudo-elemente u Elements panelu tijekom prijelaza. To vam omogućuje da vidite `group`, `image-pair`, `old` i `new` elemente i njihove primijenjene stilove/animacije.</li> <li><b>Animations Panel:</b> Animations panel u alatima za programere pruža vremensku liniju svih aktivnih animacija, uključujući one koje pokreću prijelazi prikaza. Možete pauzirati, pomicati i pregledavati svaki korak animacije.</li> <li><b>Performance Panel:</b> Koristite Performance panel za identifikaciju bilo kakvih uskih grla tijekom prijelaza, kao što su dugo vrijeme izvršavanja skripti ili "layout thrashing".</li> <li><b>Console Logs:</b> Koristite `console.log` unutar svoje `startViewTransition()` povratne funkcije za praćenje stanja aplikacije i promjena DOM-a prije i nakon snimki.</li> </ul> <h2>Globalni utjecaj i budućnost UI razvoja</h2> <p>Uvođenje CSS prijelaza prikaza, posebno s njegovim moćnim mogućnostima hvatanja stanja elemenata, predstavlja značajan iskorak u razvoju web korisničkog sučelja. Njegov utjecaj seže izvan puke estetike, temeljno mijenjajući način na koji programeri pristupaju složenim interaktivnim iskustvima za raznoliku, globalnu korisničku bazu.</p> <h3>Poboljšanje korisničkog iskustva širom svijeta</h3> <p>Za korisnike u različitim zemljama i kulturama, dosljedno i fluidno korisničko sučelje je univerzalno cijenjeno. Prijelazi prikaza s hvatanjem stanja značajno doprinose tome:</p> <ul> <li><b>Smanjenje kognitivnog opterećenja:</b> Glatki prijelazi koji održavaju kontekst (poput pozicije skrolanja ili unesenih vrijednosti) smanjuju mentalni napor potreban korisnicima da se preorijentiraju nakon navigacije ili interakcije, čineći aplikacije pristupačnijima i manje frustrirajućima.</li> <li><b>Poboljšanje percipiranih performansi:</b> Čak i ako dohvaćanje podataka ili ažuriranje DOM-a potraje trenutak, dobro izveden prijelaz prikaza daje dojam trenutne responzivnosti, što je posebno korisno u regijama sa sporijim internetskim vezama ili na manje moćnim uređajima.</li> <li><b>Dosljednost na različitim uređajima:</b> Priroda prijelaza prikaza koju upravlja preglednik osigurava dosljedniju kvalitetu animacije na različitim uređajima i veličinama zaslona, od monitora visoke razlučivosti do kompaktnih mobilnih zaslona, pružajući jedinstveno iskustvo brenda globalno.</li> <li><b>Ugodne interakcije:</b> Suptilne, dobro dizajnirane animacije poboljšavaju percipiranu kvalitetu i profesionalnost aplikacije, što dovodi do većeg zadovoljstva i angažmana korisnika.</li> </ul> <h3>Pojednostavljivanje složene UI logike</h3> <p>Iz perspektive programera, hvatanje stanja elemenata dramatično pojednostavljuje zadatak izgradnje sofisticiranih korisničkih sučelja. Prije ovoga, upravljanje dinamičkim stanjima elemenata tijekom animacija često je bio krhak i opširan proces, posebno u velikim aplikacijama koje razvijaju distribuirani timovi. Programeri više ne moraju pisati standardni JavaScript za pohranu i vraćanje pozicija skrolanja, unesenih vrijednosti ili dinamičkog stiliziranja kada element postoji tijekom promjene prikaza.</p> <p>To dovodi do:</p> <ul> <li><b>Povećane učinkovitosti programera:</b> Manje vremena utrošenog na ručno upravljanje stanjem znači više vremena usmjerenog na temeljnu logiku aplikacije i inovativne značajke.</li> <li><b>Poboljšane održivosti koda:</b> Deklariranje prijelaza i hvatanja stanja u CSS-u (s `view-transition-name`) ili jednostavnim pozivima JavaScripta (`startViewTransition`) čini kod čišćim, čitljivijim i lakšim za održavanje za programere koji rade u različitim vremenskim zonama i kulturnim kontekstima.</li> <li><b>Smanjene površine za bugove:</b> Automatizacija hvatanja stanja eliminira mnoge potencijalne bugove povezane s ručnim očuvanjem stanja, što dovodi do robusnijih i pouzdanijih aplikacija.</li> </ul> <h3>Pogled u budućnost</h3> <p>CSS prijelazi prikaza, posebno hvatanje stanja elemenata, još uvijek se razvijaju. Radna skupina aktivno istražuje poboljšanja i proširuje njegove mogućnosti. Možemo očekivati još granularniju kontrolu nad time koja se specifična stanja hvataju, dublju integraciju s cjevovodima za renderiranje preglednika za još bolje performanse, i potencijalno proširenja za animiranje složenijih svojstava elemenata ili čak prilagođenih stanja podataka.</p> <p>Ova temeljna tehnologija utire put novoj eri web aplikacija koje se po fluidnosti i interaktivnosti mogu mjeriti s nativnim desktop ili mobilnim aplikacijama, sve dok zadržavaju inherentnu otvorenost i pristupačnost web platforme. Ona osnažuje programere diljem svijeta da grade privlačnija, korisnički prijateljskija i učinkovitija digitalna iskustva, pomičući granice onoga što je moguće u pregledniku.</p> <h2>Zaključak</h2> <p>CSS View Transition Capture je mnogo više od vizualnog trika; to je dubok napredak u web razvoju koji rješava dugogodišnji izazov održavanja stanja elemenata tijekom promjena korisničkog sučelja. Besprijekornim očuvanjem korisničkog unosa, pozicija skrolanja i dinamičkog stiliziranja, osnažuje programere da stvaraju web aplikacije koje djeluju istinski nativno, responzivno i intuitivno.</p> <p>Za globalnu publiku, to se prevodi u dosljednije, manje frustrirajuće i istinski ugodno iskustvo, bez obzira na njihov uređaj, mrežne uvjete ili kulturni kontekst. Kao programerima, prihvaćanje CSS prijelaza prikaza i ovladavanje njegovim mogućnostima hvatanja stanja bit će ključno za izgradnju sljedeće generacije visoko interaktivnih i korisnički usmjerenih web aplikacija. Počnite eksperimentirati s `view-transition-name` već danas i otključajte novu dimenziju besprijekornog dizajna korisničkog sučelja u svojim projektima.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">CSS prijelazi prikaza</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">hvatanje stanja elemenata</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">glatki UI prijelazi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">web animacije</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">single-page aplikacije</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">SPA</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">korisničko iskustvo</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">produktivnost developera</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">cross-browser kompatibilnost</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">optimizacija performansi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">pristupačnost</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progresivno poboljšanje</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI razvoj</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">front-end razvoj</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0}; $RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template><template id="P:47"></template><template id="P:48"></template><template id="P:49"></template><template id="P:4a"></template><template id="P:4b"></template><template id="P:4c"></template><template id="P:4d"></template></div><link rel="alternate" hrefLang="zh" href="https://mlog.uz/zh/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="ja" href="https://mlog.uz/ja/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="CSS View Transition Capture: Otključavanje besprijekornog sučelja uz očuvanje stanja elemenata"/><meta property="og:description" content="Istražite CSS View Transition Capture i kako čuva stanja elemenata za glatke, učinkovite i ugodne prijelaze sučelja u modernim web aplikacijama."/><meta property="og:url" content="https://mlog.uz/hr/blog/CSS%20View%20Transition%20Capture%3A%20Unlocking%20Seamless%20UI%20with%20Element%20State%20Preservation"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="hr"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-02T08:47:39.011Z"/><meta property="article:modified_time" content="2025-09-02T08:47:39.011Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="CSS prijelazi prikaza"/><meta property="article:tag" content="hvatanje stanja elemenata"/><meta property="article:tag" content="glatki UI prijelazi"/><meta property="article:tag" content="web animacije"/><meta property="article:tag" content="single-page aplikacije"/><meta property="article:tag" content="SPA"/><meta property="article:tag" content="korisničko iskustvo"/><meta property="article:tag" content="produktivnost developera"/><meta property="article:tag" content="cross-browser kompatibilnost"/><meta property="article:tag" content="optimizacija performansi"/><meta property="article:tag" content="pristupačnost"/><meta property="article:tag" content="progresivno poboljšanje"/><meta property="article:tag" content="UI razvoj"/><meta property="article:tag" content="front-end razvoj"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="CSS View Transition Capture: Otključavanje besprijekornog sučelja uz očuvanje stanja elemenata"/><meta name="twitter:description" content="Istražite CSS View Transition Capture i kako čuva stanja elemenata za glatke, učinkovite i ugodne prijelaze sučelja u modernim web aplikacijama."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><div hidden id="S:47"></div><script>$RS("S:47","P:47")</script><div hidden id="S:48"></div><script>$RS("S:48","P:48")</script><div hidden id="S:49"></div><script>$RS("S:49","P:49")</script><div hidden id="S:4a"></div><script>$RS("S:4a","P:4a")</script><div hidden id="S:4b"></div><script>$RS("S:4b","P:4b")</script><div hidden id="S:4c"></div><script>$RS("S:4c","P:4c")</script><div hidden id="S:4d"></div><script>$RS("S:4d","P:4d")</script><script>$RC("B:0","S:0")</script></body></html>