Pagerinkite vartotojo patirtį: CSS @view-transition valdymas navigacijos animacijai

Nuolat besikeičiančiame interneto kūrimo kraštovaizdyje vartotojo patirtis (UX) yra svarbiausia. Sklandi ir intuityvi navigacija gali žymiai paveikti vartotojų įsitraukimą ir bendrą pasitenkinimą. Įveskite CSS @view-transition, galingą įrankį, leidžiantį kūrėjams kurti vizualiai patrauklius ir efektyvius perėjimus tarp skirtingų interneto programos būsenų, taip pagerinant vartotojo kelionę.

Kas yra CSS peržiūros perėjimai?

CSS peržiūros perėjimai siūlo deklaratyvų būdą animuoti pokyčius tarp dviejų DOM būsenų. Skirtingai nei tradiciniai CSS perėjimai ar JavaScript pagrįstos animacijos, peržiūros perėjimai atlieka sudėtingą užduotį užfiksuoti puslapio būseną prieš ir po pakeitimo, o tada sklandžiai animuoti tarp jų. Tai lemia sklandesnį ir natūralesnį perėjimą, išvengiant aštrių šuolių ir pagerinant suvokiamą svetainės našumą.

Pagalvokite apie tai taip: įsivaizduokite, kaip vartote fizinio knygos puslapius. Kiekvienas puslapis sklandžiai pereina į kitą, pateikdamas vizualinį signalą, kuris jungia turinį. CSS peržiūros perėjimų tikslas yra atkartoti šią patirtį internete, suteikiant tęstinumo ir erdvės suvokimo jausmą.

Kodėl naudoti peržiūros perėjimus?

• Pagerinta vartotojo patirtis: Sklandūs perėjimai leidžia jūsų svetainei atrodyti reaguojanti ir patobulinta, o tai lemia malonesnę vartotojo patirtį.
• Patobulintas suvokiamas našumas: Net jei faktinis įkėlimo laikas išlieka toks pat, peržiūros perėjimai gali padaryti jūsų svetainę greitesnę, pateikdami vizualinius atsiliepimus perėjimo metu.
• Aiškiau navigacija: Peržiūros perėjimai gali padėti vartotojams suprasti skirtingų jūsų svetainės dalių ryšį, todėl navigacija tampa intuityvesnė.
• Sumažintas pažintinis krūvis: Pateikdami vizualinius signalus, peržiūros perėjimai gali padėti vartotojams sekti pakeitimus ir suprasti naujo turinio kontekstą, sumažindami pažintinį krūvį.
• Modernus ir patrauklus dizainas: Peržiūros perėjimai gali suteikti jūsų svetainei rafinuotumo ir modernumo, išskirdami ją iš minios.

Pagrindinis peržiūros perėjimų įgyvendinimas

Peržiūros perėjimų įdiegimas CSS apima keletą pagrindinių veiksmų:

1. Įgalinkite peržiūros perėjimus: Naudodami „JavaScript“, įjungsite peržiūros perėjimą naudodami document.startViewTransition() API.
2. Apibrėžkite perėjimo stilius (nebūtina): Galite tinkinti perėjimo išvaizdą naudodami CSS.

„JavaScript“ paleidiklis

Peržiūros perėjimų naudojimo pagrindas yra funkcija document.startViewTransition(). Ši funkcija kaip argumentą priima atgalinį ryšį. Atgalinis ryšys turėtų atnaujinti DOM į naują būseną. Naršyklė pasirūpina likusiu, užfiksuodama „seną“ ir „naują“ būsenas ir animuodama tarp jų.

            
  function navigate(newContent) {
    document.startViewTransition(() => {
      // Atnaujinkite DOM nauju turiniu
      document.querySelector('#content').innerHTML = newContent;
    });
  }

  // Pavyzdys: 
  document.getElementById('link-to-page-2').addEventListener('click', (event) => {
    event.preventDefault();
    navigate('<p>Tai 2 puslapio turinys!</p>');
  });
  
            

              
                Copy
              
            
          

Šiame pavyzdyje spustelėjus nuorodą su ID „link-to-page-2“, suaktyvinama funkcija navigate. Ši funkcija iškviečia document.startViewTransition(), pateikdama atgalinį ryšį, kuris atnaujina elemento su ID „content“ turinį.

Pagrindinis CSS pritaikymas

Pagal numatytuosius nustatymus peržiūros perėjimai blunka tarp seno ir naujo turinio. Tačiau perėjimą galite pritaikyti naudodami CSS. Štai keletas pagrindinių CSS ypatybių, kurias galite naudoti:

• view-transition-name: Priskiria pavadinimą elementui, leidžiantis jį animuoti atskirai perėjimo metu.
• transition: Taiko standartinius CSS perėjimus peržiūros perėjimo elementams.

            
  #content {
    view-transition-name: content-area;
  }

  ::view-transition-old(content-area),
  ::view-transition-new(content-area) {
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
  }

  ::view-transition-old(content-area) {
    transform: translateX(0);
  }

  ::view-transition-new(content-area) {
    transform: translateX(0);
  }
  
            

              
                Copy
              
            
          

Šiame pavyzdyje:

• view-transition-name: content-area; priskiria pavadinimą „content-area“ elementui #content. Tai nurodo naršyklei, kad šis elementas būtų apdorotas specialiai peržiūros perėjimo metu.
• ::view-transition-old(content-area) ir ::view-transition-new(content-area) pseudo elementai atrenka seną ir naują elemento versijas perėjimo metu.
• Tada šiems elementams taikome perėjimą, dėl kurio jie išnyksta ir slenka perėjimo metu.

Išplėstiniai peržiūros perėjimo metodai

Nors pagrindinis įgyvendinimas suteikia tvirtą pagrindą, galite pasinaudoti pažangesniais metodais, kad sukurtumėte tikrai stulbinančius ir patrauklius peržiūros perėjimus.

Atskirų elementų animacija

Priskirdami unikalias view-transition-name savybes atskiriems elementams, galite juos animuoti atskirai perėjimo metu. Tai leidžia sukurti sudėtingesnes ir pritaikytas animacijas.

            
  <div id="container">
    <img id="image1" src="image1.jpg" alt="Image 1" style="view-transition-name: image1;">
    <h2 id="title1" style="view-transition-name: title1;">Title 1</h2>
    <p id="description1" style="view-transition-name: description1;">Description 1</p>
  </div>
  
            

              
                Copy
              
            
          

            
  ::view-transition-old(image1) {
    transform: scale(1.2);
    opacity: 0;
  }

  ::view-transition-new(image1) {
    transform: scale(1);
    opacity: 1;
  }

  ::view-transition-old(title1) {
    transform: translateY(-20px);
    opacity: 0;
  }

  ::view-transition-new(title1) {
    transform: translateY(0);
    opacity: 1;
  }
  
            

              
                Copy
              
            
          

Šiame pavyzdyje parodyta, kaip atskirai animuoti vaizdą ir pavadinimą. Senas vaizdas padidinamas ir išnyksta, o naujas vaizdas sumažėja ir išnyksta. Senas pavadinimas nuslysta aukštyn ir išnyksta, o naujas pavadinimas nuslysta žemyn ir išnyksta. Tai sukuria dinamišką ir vizualiai patrauklų perėjimą.

Bendro elemento perėjimai

Bendrų elementų perėjimas apima vieno elemento, kuris rodomas ir „senoje“, ir „naujoje“ būsenoje, animaciją. Tai ypač naudinga kuriant tęstinumo jausmą naršant skirtingus jūsų svetainės puslapius ar skyrius.

Pavyzdžiui, įsivaizduokite produkto sąrašo puslapį ir produkto informacijos puslapį. Produkto vaizdas galėtų būti bendras elementas, sklandžiai pereinantis iš sąrašo puslapio į informacijos puslapį. Tai sukuria stiprų vizualinį ryšį tarp dviejų puslapių ir pagerina vartotojo supratimą apie jų ryšį.

Kryžminės kilmės perėjimai

Peržiūros perėjimai gali veikti net ir per skirtingas kilmes (domenus), jei būtinos CORS antraštės yra tinkamai sukonfigūruotos. Tai atveria galimybes kurti sklandžius perėjimus tarp skirtingų svetainių ar interneto programų, jei jos yra jūsų kontroliuojamos ir galite valdyti CORS nustatymus.

Geriausia peržiūros perėjimų naudojimo praktika

Nors peržiūros perėjimai siūlo galingą būdą pagerinti vartotojo patirtį, svarbu juos naudoti apdairiai ir laikytis geriausios praktikos, kad būtų užtikrintas optimalus našumas ir prieinamumas.

• Naudokite juos saikingai: Per didelis peržiūros perėjimų naudojimas gali blaškyti ir net erzinti vartotojus. Naudokite juos strategiškai, kad pagerintumėte pagrindinius sąveikos ir navigacijos taškus.
• Perėjimai turėtų būti trumpi ir gražūs: Siekite, kad perėjimai truktų apie 0,3–0,5 sekundės. Ilgesni perėjimai gali atrodyti lėti ir nutraukti vartotojo srautą.
• Prioritetas – našumas: Optimizuokite savo vaizdus ir kitus išteklius, kad peržiūros perėjimai neturėtų neigiamo poveikio puslapio įkėlimo laikui.
• Apsvarstykite prieinamumą: Įsitikinkite, kad peržiūros perėjimai nesukelia prieinamumo problemų neįgaliems vartotojams. Pateikite alternatyvius būdus naršyti jūsų svetainėje vartotojams, kurie nenori matyti animacijų.
• Išsamiai išbandykite: Išbandykite peržiūros perėjimus skirtingose ​​naršyklėse ir įrenginiuose, kad įsitikintumėte, jog jie veikia tinkamai ir suteikia nuoseklią patirtį visiems vartotojams.
• Naudokite prasmingus perėjimus: Perėjimai turėtų suteikti vertės vartotojo patirčiai, o ne tik būti akį traukiančiais. Pagalvokite, kaip animacija gali padėti vartotojui suprasti naujo turinio kontekstą arba skirtingų jūsų svetainės dalių ryšį.

Peržiūros perėjimų pavyzdžiai

Štai keletas pavyzdžių, kaip galite naudoti peržiūros perėjimus, kad pagerintumėte vartotojo patirtį savo svetainėje:

• Puslapių perėjimai: Sklandžiai pereikite tarp skirtingų jūsų svetainės puslapių ar skyrių.
• Modalinių langų perėjimai: Animuokite modalinių langų atsiradimą ir išnykimą.
• Vaizdų galerijos perėjimai: Sukurkite patrauklius perėjimus tarp vaizdų vaizdų galerijoje.
• Sąrašo elemento perėjimai: Animuokite sąrašo elementų pridėjimą, pašalinimą ar pertvarkymą.
• Būsenos pakeitimai: Animuokite komponento būsenos pakeitimus, pvz., perjungdami jungiklį arba išskleisdami skyrių.

1 pavyzdys: sklandūs puslapių perėjimai

Įsivaizduokite tinklaraščio svetainę. Vietoj trikdancio puslapio įkėlimo, kai vartotojas spustelėja tinklaraščio įrašo nuorodą, peržiūros perėjimas gali sklandžiai įstumti naują turinį iš šono, sukuriant svaiginantį ir patrauklesnį skaitymo įspūdį.

2 pavyzdys: animuoti modaliniai langai

Užuot modalinis langas staiga pasirodytų ekrane, peržiūros perėjimas gali sklandžiai jį išblukinti iš fono, atkreipdamas vartotojo dėmesį ir suteikdamas labiau patobulintą vizualinę patirtį. Panašiai, uždarant modalą, jis gali sklandžiai išblukti, švelniai nukreipdamas vartotoją atgal į pagrindinį turinį.

3 pavyzdys: patrauklūs vaizdų galerijos perėjimai

Internetiniam portfeliui ar el. prekybos svetainei vaizdų galerijos yra būtinos. Peržiūros perėjimai gali pagerinti naršymo patirtį, sukurdami sklandžius ir dinaminius perėjimus tarp vaizdų. Pavyzdžiui, dabartinis vaizdas galėtų sklandžiai priartėti, o kitas vaizdas – priartėti, sukuriant gylio ir judėjimo jausmą.

Naršyklės suderinamumas ir polyfills

Kaip palyginti nauja technologija, CSS peržiūros perėjimai gali būti nevisiškai palaikomi visose naršyklėse, ypač senesnėse versijose. Prieš diegdami patikrinkite esamą naršyklių palaikymą, bet rašymo metu jį palaiko pagrindinės šiuolaikinės naršyklės. Norėdami užtikrinti nuoseklią patirtį vartotojams nepalaikomose naršyklėse, galite naudoti polyfills. Polyfill yra „JavaScript“ kodo dalis, kuri suteikia naujesnės funkcijos funkcionalumą senesnėse naršyklėse, kurios jos nepalaiko.

Yra keletas polyfills, skirtų CSS peržiūros perėjimams, kurie gali padėti užpildyti spragą ir užtikrinti, kad jūsų svetainė atrodytų puikiai visuose įrenginiuose. Būtinai kruopščiai išbandykite savo svetainę su ir be polyfill, kad užtikrintumėte suderinamumą ir optimalų našumą.

Prieinamumo aspektai

Prieinamumas yra labai svarbus žiniatinklio kūrimo aspektas. Įdiegdami CSS peržiūros perėjimus, svarbu atsižvelgti į neįgaliuosius vartotojus ir užtikrinti, kad jūsų svetainė būtų prieinama visiems.

• Mažesnio judesio nuostata: Gerbkite vartotojo nuostatą mažesniam judesiui. Daugelis operacinių sistemų ir naršyklių leidžia vartotojams išjungti animacijas, kad sumažintų blaškymąsi ar judesio ligą. Naudokite prefers-reduced-motion CSS medijos užklausą, kad aptiktumėte šią nuostatą ir atitinkamai išjungtumėte arba sumažintumėte peržiūros perėjimų intensyvumą.
• Klaviatūros navigacija: Įsitikinkite, kad visi interaktyvūs jūsų svetainės elementai yra prieinami per klaviatūros navigaciją. Peržiūros perėjimai neturėtų trukdyti klaviatūros fokusavimo tvarkai ar apsunkinti vartotojams naršyti jūsų svetainėje naudojant klaviatūrą.
• Ekrano skaitytuvo suderinamumas: Įsitikinkite, kad jūsų peržiūros perėjimai yra suderinami su ekrano skaitytuvais. Pateikite aprašomuosius tekstinius alternatyvius variantus bet kuriam animuotam turiniui, kad vartotojai, turintys regėjimo problemų, vis tiek galėtų suprasti perėjimų kontekstą.
• Pakankamas kontrastas: Įsitikinkite, kad yra pakankamas kontrastas tarp teksto ir fono spalvų, ypač perėjimo metu. Tai padės vartotojams, turintiems prastą regėjimą, aiškiai matyti turinį.

Peržiūros perėjimų ateitis

CSS peržiūros perėjimai yra didelis žingsnis į priekį kuriant žiniatinklį, suteikiant galingą ir deklaratyvų būdą pagerinti vartotojo patirtį ir sukurti patrauklesnes ir įtraukiančias žiniatinklio programas. Plečiantis naršyklių palaikymui ir tobulėjant technologijoms, ateityje galime tikėtis dar daugiau novatoriško ir kūrybingo peržiūros perėjimų naudojimo.

Kai kurie galimi būsimi pokyčiai apima:

• Pažangesnės animacijos parinktys: Tikėkitės pamatyti daugiau parinkčių, kaip pritaikyti peržiūros perėjimų išvaizdą ir elgseną, pavyzdžiui, palaikymą pasirinktiniams greitėjimo funkcijoms, pakopinei animacijai ir sudėtingesnius perėjimo efektus.
• Integracija su žiniatinklio komponentais: Peržiūros perėjimai greičiausiai bus vis labiau integruoti su žiniatinklio komponentais, leidžiantis kūrėjams kurti pakartotinai naudojamus ir įkapsuliuotus UI elementus su įmontuotais perėjimo efektais.
• Serverio pusės atvaizdavimo palaikymas: Kadangi serverio pusės atvaizdavimas tampa labiau paplitęs, galime tikėtis, kad serverio pusėje bus palaikomi peržiūros perėjimai, o tai leis dar sklandžiau ir efektyviau įkelti pradinį puslapį.

Išvada

CSS @view-transition yra žaidimo keitiklis žiniatinklio kūrėjams, siekiantiems pagerinti vartotojo patirtį per sklandžią ir patrauklią navigacijos animaciją. Suprasdami šiame vadove aprašytus principus, metodus ir geriausią praktiką, galite atskleisti visą peržiūros perėjimų potencialą ir sukurti svetaines, kurios yra ir vizualiai nuostabios, ir efektyvios. Prisijunkite prie šio galingo įrankio ir pradėkite paversti savo svetainę tikrai įtraukiančia ir patogia patirtimi vartotojams visame pasaulyje.