CSS-i vaateülemineku hõive: sujuva kasutajaliidese loomine elemendi oleku säilitamisega

Veebiarenduse dünaamilises maailmas on intuitiivsete, reageerivate ja tõeliselt kaasahaaravate kasutajaliideste loomine esmatähtis. Mida keerukamaks veebirakendused muutuvad, seda suurem on nõudlus sujuvate üleminekute järele erinevate vaadete või olekute vahel. Möödas on järskude lehe uuesti laadimiste või häirivate visuaalsete nihete ajad; tänapäeva kasutajad ootavad sujuvat, peaaegu rakenduselaadset kogemust otse oma brauserites. Selle ootuse täitmine on arendajatele ajalooliselt olnud märkimisväärne väljakutse, nõudes sageli keerukaid JavaScripti animatsioone, kompleksset olekuhaldust või tülikate kolmandate osapoolte teekide kasutamist.

Siin tulevad mängu CSS-i vaateüleminekud (CSS View Transitions), murranguline veebiplatvormi funktsioon, mis on loodud elegantsete ja jõudlike kasutajaliidese üleminekute loomise lihtsustamiseks. Kuigi vaateüleminekud pakuvad võimsat mehhanismi visuaalsete muutuste animeerimiseks, peitub nende tõeline geniaalsus vähem ilmselges, kuid sügavalt mõjukas võimekuses: elemendi oleku hõives (Element State Capture). See funktsioon ületab pelgalt visuaalse moondamise; see säilitab arukalt elementide sisemise oleku, alates kasutaja sisendist kuni kerimispositsioonide ja dünaamilise stiilimiseni, tagades tõeliselt pideva ja meeldiva kasutajakogemuse vaatevahetuste ajal.

See põhjalik juhend süveneb CSS-i vaateülemineku hõive mehaanikasse, uurides selle vajalikkust, tööpõhimõtteid ja seda, kuidas arendajad üle maailma saavad seda kasutada ülimalt keerukate ja ligipääsetavate veebirakenduste loomiseks. Avastame, kuidas see tehnoloogia lahendab kauaaegseid väljakutseid kasutajaliidese arenduses, pakkudes praktilisi teadmisi ja rakendatavaid strateegiaid erinevate projektide ja globaalse publiku jaoks.

CSS-i vaateüleminekute mõistmine: alused

Enne kui me elemendi oleku hõivet lahkama hakkame, on oluline mõista CSS-i vaateüleminekute enda aluskontseptsiooni. Oma olemuselt on vaateüleminek brauseri poolt orkestreeritud mehhanism, mis võimaldab sujuvaid, atomaarseid üleminekuid kahe erineva DOM-i oleku vahel. Selle asemel, et käsitsi animeerida üksikuid elemente JavaScripti või keerukate CSS-i võtmekaadritega, saavad arendajad deklareerida ülemineku ja brauser tegeleb hetktõmmiste loomise, nende vahel animeerimise ja DOM-i graatsilise uuendamisega.

Mis on vaateüleminekud?

Vaateüleminekud pakuvad deklaratiivset viisi DOM-i muudatuste animeerimiseks. Käivitamisel ei vaheta brauser lihtsalt vana sisu uue vastu; selle asemel jäädvustab ta hetktõmmise "vanast" vaatest, valmistab "uue" vaate ette ekraaniväliselt ja seejärel orkestreerib animatsiooni vanade ja uute vaadete asjakohaste elementide hetktõmmiste vahel. See protsess tagab, et üleminekud on alati sujuvad, isegi kui aluseks olevad DOM-i uuendused on keerulised või aeganõudvad.

Peamine eelis on animatsiooni lahtisidumine DOM-i uuendusest. Saate oma DOM-i uuendada mis tahes viisil (nt klasside muutmine, elementide lisamine/eemaldamine, innerHTML-i uuendamine) ja kui te mähite selle uuenduse vaateüleminekusse, proovib brauser muudatust animeerida. See lihtsustab oluliselt koodi, parandab hooldatavust ja suurendab jõudlust, delegeerides keerukad animatsiooniülesanded brauseri optimeeritud renderdustorule.

"Hetktõmmise" kontseptsioon

Vaateüleminekute maagia sõltub "hetktõmmiste" kontseptsioonist. Kui algatate vaateülemineku, teeb brauser pildi (renderduse hetktõmmise) DOM-i hetkeolekust. See on "vana" vaade. Seejärel uuendab teie JavaScript DOM-i, et kajastada "uut" vaadet. Kohe pärast DOM-i uuendamist teeb brauser uue hetktõmmise asjakohastest elementidest nende uutes positsioonides ja stiilides. Seejärel animeerib üleminek nende kahe hetktõmmise vahel.

Oluline on, et need pole lihtsalt staatilised pildid. Brauser genereerib hulga pseudo-elemente (nt `::view-transition-old`, `::view-transition-new`), mis esindavad neid hetktõmmiseid. Neid pseudo-elemente saab sihtida CSS-animatsioonidega, võimaldades ülimalt kohandatavaid ja väljendusrikkaid üleminekuid. See süsteem tagab, et isegi kui DOM drastiliselt muutub, tajub kasutaja pigem pidevat, animeeritud teekonda kui järsku hüpet.

Omadus `view-transition-name`

Et öelda brauserile, milliseid elemente tuleks vana ja uue vaate vahel animeerida ja, mis kõige tähtsam, milliste elementide olekud tuleks hõivata, kasutame CSS-i omadust `view-transition-name`. Kui vanas vaates oleval elemendil ja uues vaates oleval elemendil on sama `view-transition-name`, mõistab brauser, et need on loogiliselt "sama" element, isegi kui nende asukoht, suurus või sisu on muutunud. Seejärel proovib ta animeerida transformatsiooni nende kahe oleku vahel.

Näiteks kui teil on toote pilt nimekirjalehel ja seejärel navigeerite selle detaililehele, annab sama `view-transition-name`-i määramine sellele tootepildile mõlemas vaates brauserile käsu animeerida selle liikumist ja suuruse muutmist, luues "kangelaspildi" üleminekuefekti. `view-transition-name` toimib unikaalse identifikaatorina ühe ülemineku kontekstis, võimaldades brauseril elemente arukalt sobitada ja animeerida. See on võimas tööriist, mis muudab keerulised mitmeastmelised animatsioonid lihtsaks deklaratiivseks CSS-i omaduseks.

Süvitsiminek elemendi oleku hõivesse

Kuigi `view-transition-name`-i tuntakse peamiselt selle rolli poolest visuaalsete elementide animeerimisel, ulatub selle funktsionaalsus palju kaugemale lihtsast visuaalsest moondamisest. See on elemendi oleku hõive nurgakivi, funktsioon, mis võimaldab vaateüleminekutel säilitada ja edasi kanda elementide mittevisuaalseid, interaktiivseid ja dünaamilisi olekuid üleminekute ajal. Siin eristuvad vaateüleminekud tõeliselt varasematest animatsioonitehnikatest.

Visuaalsusest kaugemale: oleku säilitamise vajadus

Kujutage ette stsenaariumi ühelehelises rakenduses (SPA), kus kasutaja täidab mitmeastmelist vormi. Ta sisestab andmed sisendväljale, seejärel navigeerib vormi teise ossa (võib-olla kokkuvõttelehele) ja naaseb seejärel eelmisele sammule. Ilma elemendi oleku hõiveta lähtestataks sisendväli tõenäoliselt, sundides kasutajat oma andmeid uuesti sisestama. Samamoodi kaaluge pikka nimekirja, kus kasutaja on kerinud poole peale. Detailvaatesse navigeerimine ja seejärel nimekirja tagasi pöördumine lähtestaks tavaliselt kerimispositsiooni algusesse, häirides kasutaja voogu. Need näiliselt väikesed probleemid võivad oluliselt halvendada kasutajakogemust, põhjustades frustratsiooni ja suurendades kognitiivset koormust.

Traditsioonilised veebianimatsioonid keskendusid peamiselt visuaalsetele omadustele nagu asukoht, läbipaistvus või skaala. Elementide sisemiste olekute säilitamine – näiteks sisendi `value`, märkeruudu `checked` olek, elemendi `scrollTop` või `scrollLeft`, selle `focus` olek või dünaamiliselt rakendatud CSS-i kohandatud omadused – oli keeruline ülesanne. Arendajad pidid need olekud enne DOM-i uuendamist käsitsi JavaScriptis hõivama ja seejärel pärast uue vaate renderdamist vaevaliselt uuesti rakendama. See oli vigaderohke, jõudlust nõudev ja põhjustas sageli värelemist või ebajärjepidevust, eriti globaalsetes rakendustes, kus võrgutingimused ja seadme võimekus varieeruvad.

Elemendi oleku hõive lahendab selle väljakutse otse. Seostades elemendi ülemineku kaudu `view-transition-name`-iga, ei animeeri brauser mitte ainult selle visuaalseid omadusi, vaid säilitab ja rakendab arukalt ka teatud olulisi mittevisuaalseid olekuid. See viib palju robustsema, prognoositavama ja meeldivama kasutajakogemuseni, olenemata sellest, kui keeruline on aluseks olev rakenduse olek või DOM-i muudatused.

Kuidas oleku hõive sisemiselt töötab

Kui elemendil on `view-transition-name` ja see esineb nii "vanas" kui ka "uues" DOM-i olekus, teostab brauser keeruka hõiveprotsessi. See ei tee lihtsalt ekraanipilti. Selle asemel loob see midagi, mida võib pidada "elemendi hetktõmmiseks" nii vana kui ka uue instantsi jaoks. See hetktõmmis ei sisalda ainult pikselandmeid; see hõlmab ka võtmeomadusi, mis määravad elemendi oleku.

Oleku hõive mehhanism on tihedalt integreeritud sellega, kuidas brauser elemente renderdab ja uuendab. Kui kutsutakse välja `document.startViewTransition()`, peatab brauser tõhusalt DOM-i uuenduse renderdamise ja teeb hetktõmmise algolekust. See hõlmab paigutust, värvimist ja, mis kriitiliselt oluline, teatud semantilisi olekuid elementidel, mis on märgistatud `view-transition-name`-iga. Pärast seda, kui teie JavaScript on DOM-i uuendanud, tehakse nende samade elementide (sama `view-transition-name`-iga) uus hetktõmmis nende uues olekus. Seejärel interpoleerib brauser animatsiooni ajal nende hõivatud olekute vahel.

See protsess on kõrgelt optimeeritud. Selle eesmärk on minimeerida paigutuse rabelemist (layout thrashing) ja tagada, et isegi keeruliste sisemiste olekutega elemendid saaksid sujuvalt üle minna, ilma et arendaja peaks tegelema ulatusliku käsitsi olekuhaldusega. Võti on selles, et brauser hõivab need olekud *enne* DOM-i uuendamist, võimaldades tal neid uuesti rakendada `::view-transition-old` või `::view-transition-new` pseudo-elementidele, mis esindavad üleminekul olevat sisu.

Kasutaja sisendi hõivamine ja säilitamine

Üks vahetumaid ja mõjukamaid eeliseid elemendi oleku hõivel on kasutaja sisendi säilitamine vormiväljades. Sisendelemendid (``, ``, `<select>`) säilitavad oma `value` atribuudi ülemineku ajal, kui neil on sama `view-transition-name`.</p> <p>Kujutage ette, et kasutaja täidab rahvusvahelise reisi broneerimiseks mitmeosalist vormi. Ta võib ühes etapis sisestada oma nime, e-posti ja sihtkoha. Kui ta navigeerib oma valiku ülevaatamiseks ja otsustab seejärel detailide muutmiseks tagasi minna, tühjendaks traditsiooniline lähenemine tõenäoliselt eelmise vaate uuesti renderdamisel vormiväljad, mis tooks kaasa frustreeriva andmekao. `view-transition-name`-i ja elemendi oleku hõivega kannab brauser sisendväärtused sujuvalt edasi. Kasutaja sisend jääb puutumatuks, pakkudes tõeliselt pidevat ja usaldusväärset vormitäitmise kogemust, mis on ülioluline rakenduste jaoks, mis teenindavad globaalseid kasutajaid, kus andmesisestus võib olla töövoo oluline osa.</p> <p>See võimekus lihtsustab dramaatiliselt keerukate vormide ja interaktiivsete komponentide arendamist, kuna arendajad ei pea enam kirjutama kohandatud JavaScripti, et salvestada ja taastada sisendväärtusi vaatevahetuste ajal.</p> <h3>Kerimispositsioonide ja fookuse säilitamine</h3> <p>Teine levinud valupunkt veebinavigatsioonis on kerimispositsiooni või fookuse kaotamine vaadete vahel üleminekul, eriti rakendustes, kus on pikk keritav sisu või keerukad interaktiivsed elemendid. Kujutage ette, et kasutaja sirvib tootekataloogi, kerides läbi sadu tooteid. Ühe toote klõpsamine detailide vaatamiseks ja seejärel tagasinupu või kohandatud navigeerimiselemendi kasutamine kataloogi naasmiseks lähtestaks tavaliselt kerimispositsiooni, sundides kasutajat oma kohta uuesti leidma. See on eriti tüütu mobiilseadmete kasutajatele või aeglasema internetiga piirkondades, kus suurte nimekirjade uuesti kerimine võib olla kohmakas.</p> <p>Elemendi oleku hõive, kui seda rakendada keritavale konteinerile (nagu `div` `overflow: auto`-ga või isegi `body` ise), suudab säilitada selle `scrollTop` ja `scrollLeft` omadused. Kui keritaval elemendil on `view-transition-name`, säilitatakse selle kerimispositsioon ülemineku ajal, tagades, et kui kasutaja sellesse vaatesse naaseb, maandub ta täpselt sinna, kus ta pooleli jäi. Sarnaselt, kui element oli fookuses (nt sisendväli või nupp), saab ka selle `focus` oleku säilitada, parandades klaviatuuriga navigeerimist ja ligipääsetavust, mis on oluline kaalutlus globaalsetele kasutajatele, kellel on erinevad sisestusmeetodid ja ligipääsetavusvajadused.</p> <h3>Dünaamiliste CSS-i omaduste ja kohandatud omaduste säilitamine</h3> <p>Veeb muutub üha dünaamilisemaks, kus elementide stiile manipuleerib sageli JavaScript või need reageerivad kasutaja interaktsioonidele. CSS-i kohandatud omadused (muutujad) on nende dünaamiliste stiilide haldamisel kesksel kohal. Elemendi oleku hõive laieneb ka neile. Kui elemendi stiil, sealhulgas selle CSS-i kohandatud omadused, muutub ülemineku ajal ja sellel on `view-transition-name`, hõivatakse need stiilid.</p> <p>See tähendab, et kui kasutate CSS-i muutujaid rakenduse teema (nt hele/tume režiim) juhtimiseks või komponendipõhiste olekute haldamiseks (nt laiendatud akordioni elemendi kõrgus), suudab brauser neid väärtusi ülemineku ajal säilitada. Näiteks kui komponendi `transform` omadust kohandatakse CSS-i muutuja kaudu, tagab hõive, et visuaalne transformatsioon jätkub sujuvalt üle vaateülemineku, selle asemel et enne uue vaate stiilide rakendamist tagasi vaikeväärtusele hüpata. See võimaldab arendajatel luua vähema vaevaga ülimalt keerukaid, andmepõhiseid animatsioone, võimaldades ainulaadset brändingut ja kasutajaliidese järjepidevust rahvusvahelistel turgudel.</p> <h3>SVG ja Canvas elemendi olek</h3> <p>Rakenduste jaoks, mis tuginevad suuresti rikkalikule graafikale, interaktiivsetele diagrammidele või kohandatud visualiseeringutele, saavad vaateüleminekud hõlbustada ka keerukate elementide, nagu SVG ja Canvas, oleku hõivet. Kuigi Canvas-elemendi kogu sisemist olekut tavaliselt ei hõivata (kuna see on sisuliselt bittraster), hõivatakse SVG-elemendi DOM-i atribuudid ja stiilid. Kui SVG-elemendil on dünaamilised atribuudid või stiilid, mis vaateolekute vahel muutuvad, ja sellel on `view-transition-name`, saab neid muutusi sujuvalt animeerida.</p> <p>Näiteks kui teil on SVG-ikoon, mille värv või kuju muutub kasutaja interaktsiooni põhjal, ja see ikoon liigub ekraani teise ossa, saab selle visuaalse oleku (värv, joone laius, transformatsioon) hõivata ja animeerida. See avab uusi võimalusi visuaalselt rikaste ja interaktiivsete andmete armatuurlaudade, mänguliideste või haridussisu loomiseks, mis peavad sujuvalt üle minema keerukale graafikale ilma kohmaka JavaScripti uuesti renderdamise või värelemiseta, pakkudes ühtlast kogemust igal seadmel, kõikjal maailmas.</p> <h3>JavaScripti juhitud olekute hõivamine</h3> <p>Kuigi vaateüleminekud tegelevad paljuga deklaratiivselt, on JavaScriptil endiselt ruumi hõiveprotsessi mõjutamiseks ja täiustamiseks. Arendajad saavad teostada toiminguid vahetult enne, kui brauser teeb "vana" hetktõmmise, või pärast seda, kui "uus" DOM on renderdatud, kuid enne selle hetktõmmise tegemist. See võimaldab täpsemat kontrolli selle üle, millised konkreetsed olekud hõivatakse või kuidas elemente üleminekuks ette valmistatakse.</p> <p>Näiteks võite soovida sundida teatud CSS-i kohandatud omaduse kindlale väärtusele vahetult enne vana hetktõmmist, et tagada konkreetne algusanimatsiooni olek. Või pärast uue DOM-i renderdamist võite enne lõpliku hetktõmmise tegemist kohandada elemendi olekut mingi rakenduse loogika põhjal, tagades, et animatsioon peegeldab õigesti kavandatud lõppolekut. See CSS-i ja JavaScripti koosmõju pakub arendajatele maksimaalset paindlikkust üleminekute ja oleku säilitamise peenhäälestamiseks vastavalt nende rakenduse spetsiifilistele nõuetele, muutes selle kohandatavaks erinevatele kasutajaliidese mustritele ja interaktsioonimudelitele kogu maailmas.</p> <h2>Vaateülemineku pseudo-elemendid ja nende roll hõives</h2> <p>Selle mõistmine, kuidas brauser vaateülemineku ajal pseudo-elemente kasutab, on animatsiooni kohandamiseks ja oleku hõive sügavuse hindamiseks ülioluline. Kui toimub vaateüleminek, ei animeeri brauser tegelikke DOM-elemente otse. Selle asemel loob ta ajutise, kihilise struktuuri pseudo-elementidest, mis esindavad vana ja uut olekut. Need pseudo-elemendid on koht, kus hõivatud olekud avalduvad ja animeeritakse.</p> <h3><code>::view-transition</code>: globaalne konteiner</h3> <p>Pseudo-element `::view-transition` on kõigi vaateülemineku animatsioonide kõrgeima taseme konteiner. See ümbritseb kogu üleminekuprotsessi. Saate seda pseudo-elementi sihtida, et rakendada globaalseid stiile või animatsioone, mis mõjutavad kogu üleminekut, näiteks kogu lehe sisse- või väljahaajumise efekti, või seada CSS-i kohandatud omadusi, mis kontrollivad ülemineku ajastuse või kestuse erinevaid aspekte. Kuigi see ei hõiva otse elemendipõhiseid olekuid, pakub see konteksti, milles kõik teised hõivatud elemendid ja nende animatsioonid toimuvad.</p> <p>Näiteks `animation-duration`-i rakendamine `::view-transition`-ile tagab, et kõik järgnevad üleminekuga seotud pseudo-elemendid järgivad seda globaalset ajastust, luues ühtse ja prognoositava kasutajakogemuse erinevates piirkondades ja seadmetes.</p> <h3><code>::view-transition-group(...)</code>: sõltumatute elementide haldamine</h3> <p>Iga elemendi jaoks, millele on määratud `view-transition-name`, loob brauser pseudo-elemendi `::view-transition-group(...)`. See grupp toimib selle konkreetse nimega elemendi hetktõmmise konteinerina. `(...)` osa sisaldab nime, mille määrasite (nt `::view-transition-group(my-hero-image)`). See pseudo-element hõivab peamiselt elemendi geomeetria (asukoht ja suurus) ning võimaldab teil neid omadusi ülemineku ajal animeerida.</p> <p>`::view-transition-group` ise ei hoia otse sisendi `value`-t ega keritava ala `scrollTop`-i. Selle asemel tagab see, et elemendi visuaalne esitus, sealhulgas kõik selle `::view-transition-image-pair`-i sees olevad hõivatud olekud, liiguksid ja muudaksid suurust korrektselt. See on üksikute elementide üleminekute lavastaja, tagades, et iga nimega element liigub sujuvalt oma vanast positsioonist uude, säilitades illusiooni ühest pidevast elemendist.</p> <h3><code>::view-transition-image-pair(...)</code>: vana ja uus</h3> <p>Iga `::view-transition-group(...)` sisse loob brauser pseudo-elemendi `::view-transition-image-pair(...)`. See pseudo-element on virn kahest teisest pseudo-elemendist: `::view-transition-old(...)` ja `::view-transition-new(...)`. `image-pair` vastutab elemendi vana ja uue visuaalse oleku vahelise rist-hajutamise (cross-fading) või segamise eest. See on kriitiline punkt, kus oleku hõive visuaalne aspekt mängu tuleb.</p> <p>Vaikimisi hajub `::view-transition-old` välja ja `::view-transition-new` hajub sisse, luues sujuva rist-hajutamise efekti. Arendajad saavad `image-pair`-i sihtida, et seda käitumist kohandada, näiteks pannes ühe välja libisema ja teise sisse libisema või rakendades keerukamaid segamisrežiime. Just selle paari sees kuvatakse ja animeeritakse hõivatud *andmete* (nagu sisendväärtused või kerimispositsioonid) visuaalne esitus.</p> <h3><code>::view-transition-old(...)</code>: väljuv hetktõmmis</h3> <p>See pseudo-element esindab elemendi hetktõmmist sellisena, nagu see ilmus *enne* DOM-i uuendamist. See on see, mida kasutaja algselt välja hajuvana näeb. Oluline on, et kui algsel elemendil oli sisemine olek (nagu sisendväärtus või kerimispositsioon), mis hõivati, peegeldub see olek selle pseudo-elemendi visuaalses esituses. Näiteks kui hõivati tekstiga sisendväli, kuvab `::view-transition-old` selle teksti oma hetktõmmise osana.</p> <p>Saate rakendada CSS-animatsioone `::view-transition-old`-ile, et kontrollida, kuidas väljuv element kaob. Vaikimisi hajub see välja, kuid saate seda animeerida libisema, skaleeruma või rakendama mis tahes muud CSS-i transformatsiooni. See annab detailse kontrolli vana oleku hüvastijätu animatsiooni üle, tagades, et see integreerub ideaalselt üldise kasutajakogemusega.</p> <h3><code>::view-transition-new(...)</code>: sisenev hetktõmmis</h3> <p>Vastupidiselt esindab `::view-transition-new(...)` elemendi hetktõmmist *pärast* DOM-i uuendamist. See on see, mida kasutaja näeb sisse hajuvana või paika animeerituna. Sarnaselt oma vastandile, kui algsel elemendil oli hõivatud olek, kuvab `::view-transition-new` selle oleku. Näiteks kui sisendvälja väärtus muutus DOM-i uuendamise ajal (või säilitati vanast olekust), näitab `::view-transition-new` uuendatud või säilitatud väärtust.</p> <p>Seda pseudo-elementi saab samuti animeerida CSS-iga, et kontrollida, kuidas uus element ilmub. Vaikimisi hajub see sisse, kuid seda saab kohandada libisema, skaleeruma või transformeeruma koos `::view-transition-old`-iga, et luua tõeliselt omanäoline üleminek. Võimalus manipuleerida nii vana kui ka uue hetktõmmisega CSS-animatsioonide abil annab arendajatele tohutu võimu luua unikaalseid ja kaasahaaravaid kasutajaliidese kogemusi, tagades brändi järjepidevuse ja disainikeele säilimise, olenemata kasutaja asukohast või seadmest.</p> <h2>Praktilised rakendused ja koodinäited</h2> <p>Et elemendi oleku hõive võimsust täielikult hinnata, uurime mõningaid praktilisi näiteid. Need stsenaariumid on levinud moodsates veebirakendustes ja illustreerivad, kuidas vaateüleminekud lihtsustavad varem keerulisi animatsiooni- ja olekuhalduse ülesandeid.</p> <h3>Vaateülemineku põhiseadistus</h3> <p>Igasuguse vaateülemineku lubamise põhiline samm on mähkida oma DOM-i uuendus `document.startViewTransition()`-i sisse:</p> <div class="code-block-wrapper"> <pre data-language="code"> <code>// Teie JavaScripti failis function updateDOM() { // Teie kood DOM-i uuendamiseks läheb siia // nt innerHTML-i muutmine, elementide lisamine/eemaldamine, stiilide uuendamine document.getElementById('content').innerHTML = ` <h2>Uus sisu</h2> <p>See on värskendatud sisu.</p> `; } // Käivita vaateüleminek document.startViewTransition(() => updateDOM()); </code> <div class="copy-button-container"> <button data-code="Ly8gVGVpZSBKYXZhU2NyaXB0aSBmYWlsaXMKZnVuY3Rpb24gdXBkYXRlRE9NKCkgewogIC8vIFRlaWUga29vZCBET00taSB1dWVuZGFtaXNla3MgbORoZWIgc2lpYQogIC8vIG50IGlubmVySFRNTC1pIG11dXRtaW5lLCBlbGVtZW50aWRlIGxpc2FtaW5lL2VlbWFsZGFtaW5lLCBzdGlpbGlkZSB1dWVuZGFtaW5lCiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NvbnRlbnQnKS5pbm5lckhUTUwgPSBgCiAgICA8aDI+VXVzIHNpc3U8L2gyPgogICAgPHA+U2VlIG9uIHbkcnNrZW5kYXR1ZCBzaXN1LjwvcD4KICBgOwp9CgovLyBL5Gl2aXRhIHZhYXRl/GxlbWluZWsKZG9jdW1lbnQuc3RhcnRWaWV3VHJhbnNpdGlvbigoKSA9PiB1cGRhdGVET00oKSk7Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p>See lihtne muster ütleb brauserile: "Ma hakkan DOM-i muutma. Palun hõiva vana olek, rakenda minu muudatused, seejärel hõiva uus olek ja animeeri nende vahel." Oleku hõive maagia toimub siis, kui `view-transition-name` rakendatakse konkreetsetele elementidele `updateDOM()`-i sees või elementidele, mis püsivad mõlemas olekus.</p> <h3>Näide 1: vormi sisendi oleku säilitamine</h3> <p>Vaatleme stsenaariumi, kus kasutaja täidab sisendvälja ja seejärel muutub osa lehest dünaamiliselt, kuid sisendväli jääb alles. Me tahame, et sisendi väärtus säiliks.</p> <h4>HTML-i struktuur:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="app-container"> <div id="dynamic-content"> <p>Lehe esialgne sisu.</p> </div> <input type="text" id="my-input" placeholder="Sisesta midagi..."> <button id="update-button">Uuenda sisu</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPGRpdiBpZD0iZHluYW1pYy1jb250ZW50Ij4KICAgIDxwPkxlaGUgZXNpYWxnbmUgc2lzdS48L3A+CiAgPC9kaXY+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJteS1pbnB1dCIgcGxhY2Vob2xkZXI9IlNpc2VzdGEgbWlkYWdpLi4uIj4KICA8YnV0dG9uIGlkPSJ1cGRhdGUtYnV0dG9uIj5VdWVuZGEgc2lzdTwvYnV0dG9uPgo8L2Rpdj4K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS koos `view-transition-name`-iga:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Määra sisendelemendile view-transition-name */ #my-input { view-transition-name: input-field-id; border: 1px solid #ccc; padding: 8px; width: 250px; border-radius: 4px; } /* Valikuline: lisa üleminekule mõned põhistiilid */ ::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="LyogTeTkcmEgc2lzZW5kZWxlbWVuZGlsZSB2aWV3LXRyYW5zaXRpb24tbmFtZSAqLwojbXktaW5wdXQgewogIHZpZXctdHJhbnNpdGlvbi1uYW1lOiBpbnB1dC1maWVsZC1pZDsKICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogIHBhZGRpbmc6IDhweDsKICB3aWR0aDogMjUwcHg7CiAgYm9yZGVyLXJhZGl1czogNHB4Owp9CgovKiBWYWxpa3VsaW5lOiBsaXNhIPxsZW1pbmVrdWxlIG31bmVkIHD1aGlzdGlpbGlkICovCjo6dmlldy10cmFuc2l0aW9uLW9sZChpbnB1dC1maWVsZC1pZCksCjo6dmlldy10cmFuc2l0aW9uLW5ldyhpbnB1dC1maWVsZC1pZCkgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4zczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQoKOjp2aWV3LXRyYW5zaXRpb24tb2xkKGlucHV0LWZpZWxkLWlkKSB7CiAgYW5pbWF0aW9uLW5hbWU6IGZhZGUtb3V0Owp9Cgo6OnZpZXctdHJhbnNpdGlvbi1uZXcoaW5wdXQtZmllbGQtaWQpIHsKICBhbmltYXRpb24tbmFtZTogZmFkZS1pbjsKfQoKQGtleWZyYW1lcyBmYWRlLW91dCB7CiAgZnJvbSB7IG9wYWNpdHk6IDE7IH0KICB0byB7IG9wYWNpdHk6IDA7IH0KfQoKQGtleWZyYW1lcyBmYWRlLWluIHsKICBmcm9tIHsgb3BhY2l0eTogMDsgfQogIHRvIHsgb3BhY2l0eTogMTsgfQp9Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript ülemineku käivitamiseks:</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'); // Simuleeri sisu muutmist sisendi ümber dynamicContent.innerHTML = ` <h3>Sisu uuendatud!</h3> <p>See jaotis on värskendatud, kuid teie sisend jääb alles.</p> <ul> <li>Element 1</li> <li>Element 2</li> </ul> `; }); }); </code> <div class="copy-button-container"> <button data-code="ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3VwZGF0ZS1idXR0b24nKS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHsKICAgIGNvbnN0IGR5bmFtaWNDb250ZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2R5bmFtaWMtY29udGVudCcpOwogICAgLy8gU2ltdWxlZXJpIHNpc3UgbXV1dG1pc3Qgc2lzZW5kaSD8bWJlcgogICAgZHluYW1pY0NvbnRlbnQuaW5uZXJIVE1MID0gYAogICAgICA8aDM+U2lzdSB1dWVuZGF0dWQhPC9oMz4KICAgICAgPHA+U2VlIGphb3RpcyBvbiB25HJza2VuZGF0dWQsIGt1aWQgdGVpZSBzaXNlbmQgauTkYiBhbGxlcy48L3A+CiAgICAgIDx1bD4KICAgICAgICA8bGk+RWxlbWVudCAxPC9saT4KICAgICAgICA8bGk+RWxlbWVudCAyPC9saT4KICAgICAgPC91bD4KICAgIGA7CiAgfSk7Cn0pOwo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Oleku säilitamise selgitus:</strong> Selles näites, kuigi sisu `#dynamic-content`-is asendatakse täielikult, jääb `#my-input`-i sisestatud tekst alles. Kuna `#my-input`-il on `view-transition-name: input-field-id`, tunneb brauser selle ära püsiva elemendina. See hõivab sisendi `value` enne DOM-i uuendamist ja rakendab selle uuesti pärast uuendamist, isegi kui elemendi vanem või õed-vennad on muutunud. See on vormide ja interaktiivsete komponentide jaoks revolutsiooniline, tagades ühtlase kasutajakogemuse, olenemata ümbritseva kasutajaliidese dünaamilisest olemusest.</p> <h3>Näide 2: dünaamiline sisu oleku hõivega (nimekirja ümberjärjestamine)</h3> <p>Kujutage ette sorteeritavat elementide nimekirja, kus nupule klõpsamine neid ümber järjestaks. Me tahame, et ümberjärjestamine animeeruks sujuvalt, kuid tagaksime ka, et igasugune fookus või interaktsiooni olek nimekirja elementide sees säiliks, kui need nimekirja jäävad.</p> <h4>HTML-i struktuur:</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">Element A</li> <li class="list-item" data-id="2">Element B</li> <li class="list-item" data-id="3">Element C</li> </ul> <button id="sort-button">Sorteeri nimekiri (pöördjärjestus)</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPHVsIGlkPSJpdGVtLWxpc3QiPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjEiPkVsZW1lbnQgQTwvbGk+CiAgICA8bGkgY2xhc3M9Imxpc3QtaXRlbSIgZGF0YS1pZD0iMiI+RWxlbWVudCBCPC9saT4KICAgIDxsaSBjbGFzcz0ibGlzdC1pdGVtIiBkYXRhLWlkPSIzIj5FbGVtZW50IEM8L2xpPgogIDwvdWw+CiAgPGJ1dHRvbiBpZD0ic29ydC1idXR0b24iPlNvcnRlZXJpIG5pbWVraXJpIChw9vZyZGrkcmplc3R1cyk8L2J1dHRvbj4KPC9kaXY+Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS (dünaamilise `view-transition-name`-iga):</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Iga nimekirja element saab JS-i kaudu unikaalse view-transition-name-i */ .list-item { padding: 10px; margin-bottom: 5px; background-color: #f0f0f0; border-radius: 4px; } /* Kohanda animatsioone üksikute nimekirja elementide jaoks */ ::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="LyogSWdhIG5pbWVraXJqYSBlbGVtZW50IHNhYWIgSlMtaSBrYXVkdSB1bmlrYWFsc2Ugdmlldy10cmFuc2l0aW9uLW5hbWUtaSAqLwoubGlzdC1pdGVtIHsKICBwYWRkaW5nOiAxMHB4OwogIG1hcmdpbi1ib3R0b206IDVweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjBmMGYwOwogIGJvcmRlci1yYWRpdXM6IDRweDsKfQoKLyogS29oYW5kYSBhbmltYXRzaW9vbmUg/GtzaWt1dGUgbmltZWtpcmphIGVsZW1lbnRpZGUgamFva3MgKi8KOjp2aWV3LXRyYW5zaXRpb24tZ3JvdXAoaXRlbS0qKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjVzOwogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0Owp9Cgo6OnZpZXctdHJhbnNpdGlvbi1vbGQoaXRlbS0qKSB7CiAgYW5pbWF0aW9uLW5hbWU6IGZhZGUtb3V0LW1vdmU7CiAgei1pbmRleDogMTsKfQoKOjp2aWV3LXRyYW5zaXRpb24tbmV3KGl0ZW0tKikgewogIGFuaW1hdGlvbi1uYW1lOiBmYWRlLWluLW1vdmU7CiAgei1pbmRleDogMjsKfQoKQGtleWZyYW1lcyBmYWRlLW91dC1tb3ZlIHsKICBmcm9tIHsgb3BhY2l0eTogMTsgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgMCk7IH0KICB0byB7IG9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlKHZhcigtLWR4LCAwKSwgdmFyKC0tZHksIDApKTsgfQp9CgpAa2V5ZnJhbWVzIGZhZGUtaW4tbW92ZSB7CiAgZnJvbSB7IG9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlKHZhcigtLWR4LCAwKSwgdmFyKC0tZHksIDApKTsgfQogIHRvIHsgb3BhY2l0eTogMTsgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgMCk7IH0KfQo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript dünaamilise `view-transition-name`-i ja ümberjärjestamise jaoks:</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 => { // Määra dünaamiliselt view-transition-name data-id põhjal item.style.viewTransitionName = `item-${item.dataset.id}`; }); } // Rakenda nimed esialgu applyViewTransitionNames(); sortButton.addEventListener('click', () => { document.startViewTransition(() => { // Hangi praegused elemendid ja pööra nende järjekord ümber const itemsArray = Array.from(itemList.children); itemsArray.reverse().forEach(item => itemList.appendChild(item)); // Pole vaja view-transition-name-i uuesti rakendada, kui see on juba seatud }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3QgaXRlbUxpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnaXRlbS1saXN0Jyk7CmNvbnN0IHNvcnRCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc29ydC1idXR0b24nKTsKCmZ1bmN0aW9uIGFwcGx5Vmlld1RyYW5zaXRpb25OYW1lcygpIHsKICBjb25zdCBpdGVtcyA9IGl0ZW1MaXN0LnF1ZXJ5U2VsZWN0b3JBbGwoJy5saXN0LWl0ZW0nKTsKICBpdGVtcy5mb3JFYWNoKGl0ZW0gPT4gewogICAgLy8gTeTkcmEgZPxuYWFtaWxpc2VsdCB2aWV3LXRyYW5zaXRpb24tbmFtZSBkYXRhLWlkIHD1aGphbAogICAgaXRlbS5zdHlsZS52aWV3VHJhbnNpdGlvbk5hbWUgPSBgaXRlbS0ke2l0ZW0uZGF0YXNldC5pZH1gOwogIH0pOwp9CgovLyBSYWtlbmRhIG5pbWVkIGVzaWFsZ3UKYXBwbHlWaWV3VHJhbnNpdGlvbk5hbWVzKCk7Cgpzb3J0QnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGRvY3VtZW50LnN0YXJ0Vmlld1RyYW5zaXRpb24oKCkgPT4gewogICAgLy8gSGFuZ2kgcHJhZWd1c2VkIGVsZW1lbmRpZCBqYSBw9vZyYSBuZW5kZSBq5HJqZWtvcmQg/G1iZXIKICAgIGNvbnN0IGl0ZW1zQXJyYXkgPSBBcnJheS5mcm9tKGl0ZW1MaXN0LmNoaWxkcmVuKTsKICAgIGl0ZW1zQXJyYXkucmV2ZXJzZSgpLmZvckVhY2goaXRlbSA9PiBpdGVtTGlzdC5hcHBlbmRDaGlsZChpdGVtKSk7CiAgICAvLyBQb2xlIHZhamEgdmlldy10cmFuc2l0aW9uLW5hbWUtaSB1dWVzdGkgcmFrZW5kYWRhLCBrdWkgc2VlIG9uIGp1YmEgc2VhdHVkCiAgfSk7Cn0pOwo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Selgitus:</strong> Iga nimekirja element saab unikaalse `view-transition-name`-i oma `data-id` põhjal. Kui nimekiri pööratakse ümber, järjestatakse DOM-elemendid ise ümber. Kuna `view-transition-name` jääb iga elemendi unikaalse ID jaoks samaks, hõivab brauser vana positsiooni ja animeerib seejärel elemendi uude positsiooni. Kui need nimekirja elemendid sisaldaksid keerulisi interaktiivseid elemente (nt lüliteid, minivorme), säiliksid ka nende sisemised olekud ümberjärjestamise ajal, muutes interaktsiooni kasutaja jaoks robustseks ja sujuvaks, olenemata sellest, kui palju elemente nimekirjas on või kus kasutaja geograafiliselt asub.</p> <h3>Näide 3: kerimispositsiooni hõive meisterdamine</h3> <p>Vaatleme keritavat sisu ala armatuurlaual. Kui kasutaja filtreerib sisu, muutub sisemine sisu, kuid me tahame, et filtreeritava ala kerimispositsioon säiliks, kui kasutaja on alla kerinud.</p> <h4>HTML-i struktuur:</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">Rakenda filter</button> </div> <div id="data-display"> <!-- Palju dünaamiliselt genereeritud sisu --> <p>Sisu rida 1</p><p>Sisu rida 2</p>...<p>Sisu rida 100</p> </div> </main> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iZGFzaGJvYXJkLWxheW91dCI+CiAgPG5hdj4uLi48L25hdj4KICA8bWFpbiBpZD0ic2Nyb2xsYWJsZS1jb250ZW50Ij4KICAgIDxkaXYgY2xhc3M9ImZpbHRlcnMiPgogICAgICA8YnV0dG9uIGlkPSJmaWx0ZXItYnRuIj5SYWtlbmRhIGZpbHRlcjwvYnV0dG9uPgogICAgPC9kaXY+CiAgICA8ZGl2IGlkPSJkYXRhLWRpc3BsYXkiPgogICAgICA8IS0tIFBhbGp1IGT8bmFhbWlsaXNlbHQgZ2VuZXJlZXJpdHVkIHNpc3UgLS0+CiAgICAgIDxwPlNpc3UgcmlkYSAxPC9wPjxwPlNpc3UgcmlkYSAyPC9wPi4uLjxwPlNpc3UgcmlkYSAxMDA8L3A+CiAgICA8L2Rpdj4KICA8L21haW4+CjwvZGl2Pgo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS sisu keritavaks tegemiseks ja `view-transition-name`-i rakendamiseks:</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; /* Tee see keritavaks */ padding: 20px; view-transition-name: main-content-scroll; /* Kerimisoleku hõive võti */ } #data-display p { margin-bottom: 10px; padding: 5px; background-color: #e6e6e6; border-radius: 3px; } /* Vaikevaateülemineku animatsioonid */ ::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="I2Rhc2hib2FyZC1sYXlvdXQgewogIGRpc3BsYXk6IGZsZXg7CiAgaGVpZ2h0OiAxMDB2aDsKfQoKI3Njcm9sbGFibGUtY29udGVudCB7CiAgZmxleC1ncm93OiAxOwogIG92ZXJmbG93LXk6IGF1dG87IC8qIFRlZSBzZWUga2VyaXRhdmFrcyAqLwogIHBhZGRpbmc6IDIwcHg7CiAgdmlldy10cmFuc2l0aW9uLW5hbWU6IG1haW4tY29udGVudC1zY3JvbGw7CiAgLyogS2VyaW1pc29sZWt1IGj1aXZlIHb1dGkgKi8KfQoKI2RhdGEtZGlzcGxheSBwIHsKICBtYXJnaW4tYm90dG9tOiAxMHB4OwogIHBhZGRpbmc6IDVweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTZlNmU2OwogIGJvcmRlci1yYWRpdXM6IDNweDsKfQoKLyogVmFpa2V2YWF0ZfxsZW1pbmVrdSBhbmltYXRzaW9vbmlkICovCjo6dmlldy10cmFuc2l0aW9uLW9sZChtYWluLWNvbnRlbnQtc2Nyb2xsKSwKOjp2aWV3LXRyYW5zaXRpb24tbmV3KG1haW4tY29udGVudC1zY3JvbGwpIHsKICBhbmltYXRpb24tZHVyYXRpb246IDAuM3M7Cn0K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript filtri ja sisu uuendamise käivitamiseks:</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) { // Näita ainult paarisarvulisi ridu, kui on filtreeritud content += `<p>Sisu rida ${i} ${isFiltered ? '(Filtreeritud)' : ''}</p>`; } } return content; } // Esialgne sisu laadimine dataDisplay.innerHTML = generateContent(filtered); filterButton.addEventListener('click', () => { document.startViewTransition(() => { filtered = !filtered; // Lülita filtri olekut dataDisplay.innerHTML = generateContent(filtered); }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3Qgc2Nyb2xsYWJsZUNvbnRlbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2Nyb2xsYWJsZS1jb250ZW50Jyk7CmNvbnN0IGRhdGFEaXNwbGF5ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RhdGEtZGlzcGxheScpOwpjb25zdCBmaWx0ZXJCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZmlsdGVyLWJ0bicpOwoKbGV0IGZpbHRlcmVkID0gZmFsc2U7CgpmdW5jdGlvbiBnZW5lcmF0ZUNvbnRlbnQoaXNGaWx0ZXJlZCkgewogIGxldCBjb250ZW50ID0gJyc7CiAgY29uc3QgdG90YWxMaW5lcyA9IDEwMDsKICBmb3IgKGxldCBpID0gMTsgaSA8PSB0b3RhbExpbmVzOyBpKyspIHsKICAgIGlmICghaXNGaWx0ZXJlZCB8fCBpICUgMiA9PT0gMCkgeyAvLyBO5Gl0YSBhaW51bHQgcGFhcmlzYXJ2dWxpc2kgcmlkdSwga3VpIG9uIGZpbHRyZWVyaXR1ZAogICAgICBjb250ZW50ICs9IGA8cD5TaXN1IHJpZGEgJHtpfSAke2lzRmlsdGVyZWQgPyAnKEZpbHRyZWVyaXR1ZCknIDogJyd9PC9wPmA7CiAgICB9CiAgfQogIHJldHVybiBjb250ZW50Owp9CgovLyBFc2lhbGduZSBzaXN1IGxhYWRpbWluZQpkYXRhRGlzcGxheS5pbm5lckhUTUwgPSBnZW5lcmF0ZUNvbnRlbnQoZmlsdGVyZWQpOwoKZmlsdGVyQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGRvY3VtZW50LnN0YXJ0Vmlld1RyYW5zaXRpb24oKCkgPT4gewogICAgZmlsdGVyZWQgPSAhZmlsdGVyZWQ7IC8vIEz8bGl0YSBmaWx0cmkgb2xla3V0CiAgICBkYXRhRGlzcGxheS5pbm5lckhUTUwgPSBnZW5lcmF0ZUNvbnRlbnQoZmlsdGVyZWQpOwogIH0pOwp9KTsK" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Selgitus:</strong> Kui klõpsatakse nupul "Rakenda filter", genereeritakse `data-display` sisu täielikult uuesti. Kuid kuna vanem `scrollable-content` div-il on `view-transition-name: main-content-scroll`, hõivatakse ja säilitatakse selle `scrollTop` positsioon. Kui kasutaja keris enne filtri klõpsamist alla, jääb ta pärast sisu uuendamist samale suhtelisele kerimispositsioonile, pakkudes sujuvat ja katkematut sirvimiskogemust, mis on eriti väärtuslik andmemahukate rakenduste jaoks, mida kasutavad professionaalid üle maailma.</p> <h2>Täpsemad tehnikad ja parimad praktikad</h2> <p>Elemendi oleku hõive tõhus kasutamine hõlmab enamat kui lihtsalt `view-transition-name`-i rakendamist. Läbimõeldud rakendamine ja parimate praktikate järgimine tagavad, et teie üleminekud on jõudsad, ligipääsetavad ja parandavad tõeliselt kasutajakogemust.</p> <h3>Keerukate üleminekute orkestreerimine</h3> <p>Kuigi `view-transition-name` lihtsustab paljusid stsenaariume, nõuavad keerukad kasutajaliidesed sageli nüansseeritumat orkestreerimist. Saate kombineerida vaateüleminekuid traditsiooniliste CSS-animatsioonide ja JavaScriptiga, et luua mitmeastmelisi üleminekuid:</p> <ul> <li><b>Animatsioonide aheldamine:</b> Saate kasutada `animation-delay` erinevatel `::view-transition-*` pseudo-elementidel või isegi nende sees olevatel elementidel, et luua astmelisi animatsioone. Näiteks võib kangelaspilt animeeruda esimesena, millele järgneb sisse libisev tekstisisu.</li> <li><b>Kohandatud ajastusfunktsioonid:</b> Lisaks `ease-in-out`-ile uurige kohandatud `cubic-bezier()` funktsioone, et anda oma animatsioonidele ainulaadne tunnetus, mis on kooskõlas teie brändi globaalse disainikeelega.</li> <li><b>Dünaamiline `view-transition-name`:</b> Nagu nimekirja ümberjärjestamise näites näidatud, saab `view-transition-name`-i dünaamiliselt lisada ja eemaldada JavaScripti abil. See on võimas elementide jaoks, mis ilmuvad, kaovad või muudavad rolle kasutajaliideses. Veenduge, et nimed oleksid ülemineku ajal kogu dokumendis unikaalsed.</li> </ul> <h3>Jõudlusega seotud kaalutlused</h3> <p>Vaateüleminekud on loodud olema jõudsad, delegeerides töö brauseri optimeeritud renderdustorule. Siiski jäävad mõned kaalutlused:</p> <ul> <li><b>Minimeerige suurte elementide üleminekuid:</b> Kuigi vaateüleminekud käsitlevad hetktõmmiseid tõhusalt, võib eriti suurte või arvukate elementide animeerimine siiski jõudlust mõjutada. Kasutage `view-transition-name`-i kaalutletult, peamiselt elementidel, mis tõesti saavad unikaalsest üleminekust kasu.</li> <li><b>Vältige liigseid DOM-i muudatusi:</b> Kuigi vaateüleminekud eraldavad animatsiooni DOM-i uuendustest, võivad massiivsed, optimeerimata DOM-i muudatused `startViewTransition()` tagasikutse sees siiski põhjustada lühikese viivituse enne ülemineku algust. Optimeerige oma DOM-i uuendused kiiruse jaoks.</li> <li><b>Riistvaraline kiirendus:</b> Tagage, et animeerite omadusi (nagu `transform` ja `opacity`), mis saavad kasu riistvaralisest kiirendusest. Vaateüleminekud kasutavad seda loomupäraselt, kuid on hea olla teadlik kohandatud animatsioonidest.</li> <li><b>Testimine erinevates seadmetes:</b> Testige oma üleminekuid alati erinevates seadmetes, alates tipptasemel lauaarvutitest kuni vähem võimsate mobiilseadmeteni, et tagada sujuv kogemus oma globaalsele kasutajaskonnale.</li> </ul> <h3>Ligipääsetavuse mõjud</h3> <p>Ilus üleminek on tõhus ainult siis, kui see on ligipääsetav kõigile kasutajatele. Elemendi oleku hõivel on selles oma roll, kuid tähelepanu vajavad ka muud aspektid:</p> <ul> <li><b><code>prefers-reduced-motion</code>:</b> Austage alati kasutaja `prefers-reduced-motion` seadistust. CSS-i vaateüleminekud pakuvad automaatset viisi animatsioonide keelamiseks kasutajatele, kes eelistavad vähem liikumist. Veenduge, et teie kohandatud CSS-animatsioonid `::view-transition-*` jaoks austaksid samuti seda meediapäringut.</li> <li><b>Fookuse haldamine:</b> Kuigi kerimis- ja sisendolekud hõivatakse, võib fookuse selge haldamine olla kriitilise tähtsusega. Pärast vaateüleminekut veenduge, et klaviatuuri fookus maanduks uues vaates loogilisele elemendile. Näiteks uuele lehele navigeerides seadke fookus peapealkirjale.</li> <li><b>Semantiline HTML:</b> Jätkake semantilise HTML-i kasutamist. Vaateüleminekud töötavad kõige paremini, kui aluseks olev struktuur on loogiline ja ligipääsetav, võimaldades abitehnoloogiatel sisu õigesti tõlgendada, olenemata visuaalsetest animatsioonidest.</li> <li><b>Selge tagasiside:</b> Isegi sujuvate üleminekute korral pakkuge selget visuaalset ja auditiivset tagasisidet toimingutele, eriti kasutajatele, kellel võib olla kognitiivseid häireid või kes kasutavad ekraanilugejaid.</li> </ul> <h3>Brauseriteülene ühilduvus ja varulahendused</h3> <p>CSS-i vaateüleminekud on suhteliselt uus funktsioon. Kuigi Chromiumi-põhistes brauserites laialdaselt toetatud, on tugi teistes brauserites (nagu Firefox ja Safari) aktiivses arenduses. Globaalsele publikule mõeldes sisaldab robustne strateegia progressiivset täiustamist:</p> <ul> <li><b>Funktsiooni tuvastamine:</b> Kasutage `if (document.startViewTransition)`, et vaateüleminekuid tingimuslikult rakendada. Kui seda ei toetata, peaks teie rakendus endiselt korrektselt toimima, kuigi vähem animeeritud kogemusega.</li> <li><b>Sujuv tagasilangus (Graceful Degradation):</b> Kujundage oma rakendus nii, et see töötaks ideaalselt ka ilma vaateüleminekuteta. Üleminekud peaksid täiustama, mitte olema kriitilise tähtsusega põhifunktsionaalsuse jaoks.</li> <li><b>Polüfillid (ettevaatusega):</b> Kuigi mõnede animatsioonifunktsioonide jaoks on olemas polüfillid, on tõeline polüfill vaateüleminekute sügava DOM-i hetktõmmistamise ja oleku hõive jaoks keeruline ja sageli ebapraktiline. Keskenduge natiivsele funktsiooni tuvastamisele.</li> </ul> <h3>Vaateüleminekute silumine</h3> <p>Kaasaegsed brauseri arendustööriistad pakuvad suurepärast tuge vaateüleminekute silumiseks:</p> <ul> <li><b>Elementide paneel:</b> Kontrollige `::view-transition` pseudo-elemente elementide paneelil ülemineku ajal. See võimaldab teil näha `group`, `image-pair`, `old` ja `new` elemente ning nende rakendatud stiile/animatsioone.</li> <li><b>Animatsioonide paneel:</b> Animatsioonide paneel arendustööriistades pakub ajaskaala vaadet kõigist aktiivsetest animatsioonidest, sealhulgas nendest, mida juhivad vaateüleminekud. Saate iga animatsiooni sammu peatada, kerida ja kontrollida.</li> <li><b>Jõudluse paneel:</b> Kasutage jõudluse paneeli, et tuvastada üleminekute ajal kitsaskohti, nagu pikad skripti täitmise ajad või paigutuse rabelemine.</li> <li><b>Konsooli logid:</b> Kasutage `console.log` oma `startViewTransition()` tagasikutse sees, et jälgida rakenduse olekut ja DOM-i muudatusi enne ja pärast hetktõmmiseid.</li> </ul> <h2>Globaalne mõju ja kasutajaliidese arenduse tulevik</h2> <p>CSS-i vaateüleminekute, eriti selle võimsa elemendi oleku hõive võimekuse kasutuselevõtt, kujutab endast olulist hüpet edasi veebi kasutajaliidese arenduses. Selle mõju ulatub kaugemale pelgast esteetikast, muutes põhjalikult seda, kuidas arendajad lähenevad keerukatele interaktiivsetele kogemustele mitmekesise, globaalse kasutajaskonna jaoks.</p> <h3>Kasutajakogemuse parandamine kogu maailmas</h3> <p>Erinevates riikides ja kultuurides on ühtne ja sujuv kasutajaliides universaalselt hinnatud. Vaateüleminekud koos oleku hõivega aitavad sellele oluliselt kaasa, tehes järgmist:</p> <ul> <li><b>Kognitiivse koormuse vähendamine:</b> Sujuvad üleminekud, mis säilitavad konteksti (nagu kerimispositsioon või sisendväärtused), vähendavad vaimset pingutust, mis on vajalik kasutajatel end pärast navigeerimist või interaktsiooni uuesti orienteerimiseks, muutes rakendused ligipääsetavamaks ja vähem frustreerivaks.</li> <li><b>Tajutava jõudluse parandamine:</b> Isegi kui aluseks olev andmete hankimine või DOM-i uuendamine võtab hetke, annab hästi teostatud vaateüleminek mulje kohesest reageerimisvõimest, mis on eriti kasulik aeglasemate internetiühendustega piirkondades või vähem võimsatel seadmetel.</li> <li><b>Järjepidevus erinevates seadmetes:</b> Vaateüleminekute brauseri poolt hallatav olemus tagab ühtlasema animatsiooni kvaliteedi erinevates seadmetes ja ekraanisuurustes, alates kõrge eraldusvõimega monitoridest kuni kompaktsete mobiiliekraanideni, pakkudes ühtset brändikogemust kogu maailmas.</li> <li><b>Meeldivad interaktsioonid:</b> Peened, hästi kujundatud animatsioonid parandavad rakenduse tajutavat kvaliteeti ja professionaalsust, mis viib suurema kasutajate rahulolu ja kaasatuseni.</li> </ul> <h3>Keeruka kasutajaliidese loogika lihtsustamine</h3> <p>Arendaja vaatenurgast lihtsustab elemendi oleku hõive dramaatiliselt keerukate kasutajaliideste loomise ülesannet. Enne seda oli dünaamiliste elementide olekute haldamine animatsioonide ajal sageli habras ja sõnarohke protsess, eriti hajutatud meeskondade poolt arendatud suuremahulistes rakendustes. Arendajad ei pea enam kirjutama standardset JavaScripti, et salvestada ja taastada kerimispositsioone, sisendväärtusi või dünaamilist stiili, kui element püsib üle vaatevahetuse.</p> <p>See viib:</p> <ul> <li><b>Suurenenud arendaja tõhusus:</b> Vähem aega kulutatud käsitsi olekuhaldusele tähendab rohkem aega, mis on keskendunud rakenduse põhiloogikale ja uuenduslikele funktsioonidele.</li> <li><b>Parem koodi hooldatavus:</b> Üleminekute ja oleku hõive deklareerimine CSS-is (koos `view-transition-name`-iga) või lihtsate JavaScripti kutsetega (`startViewTransition`) muudab koodi puhtamaks, loetavamaks ja lihtsamini hooldatavaks arendajatele, kes töötavad erinevates ajavööndites ja kultuurilistes kontekstides.</li> <li><b>Vähendatud vigade pindala:</b> Oleku hõive automatiseerimine kõrvaldab paljud potentsiaalsed vead, mis on seotud käsitsi oleku säilitamisega, mis viib robustsemate ja usaldusväärsemate rakendusteni.</li> </ul> <h3>Pilk tulevikku</h3> <p>CSS-i vaateüleminekud, eriti elemendi oleku hõive, arenevad endiselt. Töörühm uurib aktiivselt täiustusi ja laiendab selle võimekust. Võime oodata veelgi detailsemat kontrolli selle üle, millised konkreetsed olekud hõivatakse, sügavamat integreerimist brauseri renderdustorudega veelgi parema jõudluse saavutamiseks ja potentsiaalselt laiendusi keerukamate elemendi omaduste või isegi kohandatud andmeolekute animeerimiseks.</p> <p>See alustehnoloogia sillutab teed uuele veebirakenduste ajastule, mis konkureerivad oma sujuvuse ja interaktiivsuse poolest natiivsete laua- või mobiilirakendustega, säilitades samal ajal veebiplatvormi loomupärase avatuse ja ligipääsetavuse. See annab arendajatele üle kogu maailma võimaluse luua kaasahaaravamaid, kasutajasõbralikumaid ja jõudsamaid digitaalseid kogemusi, lükates edasi piire sellele, mis on brauseris võimalik.</p> <h2>Kokkuvõte</h2> <p>CSS-i vaateülemineku hõive on palju enamat kui visuaalne trikk; see on sügav edasiminek veebiarenduses, mis lahendab kauaaegse väljakutse elemendi oleku säilitamisel kasutajaliidese muudatuste ajal. Säilitades sujuvalt kasutaja sisendit, kerimispositsioone ja dünaamilist stiili, annab see arendajatele võimaluse luua veebirakendusi, mis tunduvad tõeliselt natiivsed, reageerivad ja intuitiivsed.</p> <p>Globaalsele publikule tähendab see ühtlasemat, vähem frustreerivat ja tõeliselt meeldivat kogemust, olenemata nende seadmest, võrgutingimustest või kultuurilisest kontekstist. Arendajatena on CSS-i vaateüleminekute omaksvõtmine ja selle oleku hõive võimekuse valdamine ülioluline järgmise põlvkonna ülimalt interaktiivsete ja kasutajakesksete veebirakenduste loomiseks. Alustage `view-transition-name`-iga eksperimenteerimist juba täna ja avage oma projektides sujuva kasutajaliidese disaini uus mõõde.</p></div><template id="P:4"></template></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><div hidden id="S:4"><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 vaateüleminekud</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">elemendi oleku hõive</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">sujuvad UI üleminekud</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">veebianimatsioon</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">ühelehelised rakendused</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">kasutajakogemus</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">arendaja tootlikkus</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">brauseriteülene ühilduvus</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">jõudluse optimeerimine</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">ligipääsetavus</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">progressiivne täiustamine</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 arendus</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">esiotsa arendus</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>