M

MLOG

Lietuvių

Įsisavinkite CSS vaizdo perėjimų API, kad sukurtumėte sklandžius ir patrauklius puslapių perėjimus. Pagerinkite vartotojo patirtį ir našumą su sklandžiomis animacijomis.

Vartotojo patirties gerinimas: išsamus CSS vaizdo perėjimų API vadovas

Šiuolaikiniame dinamiškame žiniatinklio pasaulyje vartotojo patirtis (UX) yra svarbiausia. Sklandi navigacija ir įtraukiančios sąveikos yra raktas į vartotojų pasitenkinimą ir norą sugrįžti. Vienas galingas įrankis tai pasiekti yra CSS vaizdo perėjimų API – santykinai nauja naršyklės funkcija, leidžianti programuotojams kurti sklandžius ir vizualiai patrauklius perėjimus tarp skirtingų būsenų ar puslapių žiniatinklio programoje.

Kas yra CSS vaizdo perėjimų API?

CSS vaizdo perėjimų API suteikia standartizuotą būdą animuoti vizualinius pokyčius, kurie vyksta naršant tarp skirtingų būsenų žiniatinklio programoje. Įsivaizduokite tai kaip būdą organizuoti sklandžius išblukimus, slydimus ir kitus vizualinius efektus, kai turinys atnaujinamas ekrane. Prieš šį API, programuotojai dažnai rėmėsi JavaScript bibliotekomis ir sudėtingomis CSS animacijomis, kad pasiektų panašius efektus, kas galėjo būti nepatogu ir sukelti našumo problemų. Vaizdo perėjimų API siūlo paprastesnį ir našesnį požiūrį.

Pagrindinė API idėja yra užfiksuoti „prieš“ ir „po“ DOM (Document Object Model) būsenas ir tada animuoti skirtumus tarp jų. Naršyklė atlieka sunkiausią animacijos kūrimo darbą, atlaisvindama programuotojus nuo būtinybės rašyti sudėtingą animacijos kodą rankiniu būdu. Tai ne tik supaprastina kūrimo procesą, bet ir padeda užtikrinti sklandesnius ir našesnius perėjimus.

Kodėl naudoti CSS vaizdo perėjimų API?

Kaip tai veikia?

CSS vaizdo perėjimų API daugiausia apima vieną JavaScript funkciją: `document.startViewTransition()`. Ši funkcija priima atgalinio iškvietimo (callback) funkciją kaip argumentą. Šios funkcijos viduje atliekate DOM atnaujinimus, kurie atspindi perėjimą tarp vaizdų. Naršyklė automatiškai užfiksuoja „prieš“ ir „po“ DOM būsenas ir sukuria perėjimo animaciją.

Štai supaprastintas pavyzdys:


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

Išnagrinėkime šį kodą:

  1. `updateContent(newContent)`: ši funkcija priima naują turinį, kuris bus rodomas, kaip argumentą.
  2. `document.startViewTransition(() => { ... });`: tai yra API pagrindas. Jis nurodo naršyklei pradėti vaizdo perėjimą. Funkcija, perduota kaip argumentas `startViewTransition`, yra įvykdoma.
  3. `document.querySelector('#content').innerHTML = newContent;`: atgalinio iškvietimo funkcijos viduje atnaujinate DOM nauju turiniu. Būtent čia atliekate puslapio pakeitimus, kuriuos norite animuoti.

Likusį darbą atlieka naršyklė. Ji užfiksuoja DOM būseną prieš ir po `innerHTML` atnaujinimo ir sukuria sklandų perėjimą tarp dviejų būsenų.

Pagrindinis įgyvendinimo pavyzdys

Štai išsamesnis pavyzdys su HTML, CSS ir JavaScript:

HTML (index.html):





  
  
  Vaizdo perėjimų demonstracija
  


  

  

    
Pagrindinis

    
Sveiki atvykę į pagrindinį puslapį!

CSS (style.css):


body {
  font-family: sans-serif;
  margin: 20px;
}

nav {
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #3e8e41;
}

/* Pereinančių elementų stiliai */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fadeOut;
}

::view-transition-new(root) {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

JavaScript (script.js):


const contentDiv = document.getElementById('content');
const navButtons = document.querySelectorAll('nav button');

const pages = {
  home: '
Pagrindinis
Sveiki atvykę į pagrindinį puslapį!
',
  about: '
Apie
Sužinokite daugiau apie mus.
',
  contact: '
Kontaktai
Susisiekite su mumis.
',
};

function updateContent(target) {
  document.startViewTransition(() => {
    contentDiv.innerHTML = pages[target];
    document.documentElement.scrollTop = 0; // Atstatyti slinkties poziciją
  });
}

navButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    const target = event.target.dataset.target;
    updateContent(target);
  });
});

Šiame pavyzdyje, paspaudus naršymo mygtukus, turinio atnaujinimo metu įvyksta išnykimo (fade) perėjimas. CSS apibrėžia `fadeIn` ir `fadeOut` animacijas, o JavaScript naudoja `document.startViewTransition`, kad organizuotų perėjimą.

Pažangios technikos ir pritaikymas

CSS vaizdo perėjimų API siūlo keletą pažangių funkcijų perėjimams pritaikyti:

1. Pavadinti perėjimai

Galite priskirti pavadinimus konkretiems elementams, kad sukurtumėte tikslingesnius perėjimus. Pavyzdžiui, galbūt norėsite, kad tam tikras paveikslėlis sklandžiai pereitų iš vienos vietos į kitą naršant tarp puslapių.

HTML:


Image 1

CSS:


::view-transition-group(hero-image) {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

Šis kodas priskiria pavadinimą `hero-image` paveikslėliui. Tada CSS naudoja šią konkrečią perėjimo grupę, kad pritaikytų pasirinktinę animaciją. `::view-transition-group()` pseudo-elementas leidžia stilizuoti konkrečius pereinančius elementus.

2. `view-transition-name` savybė

Ši CSS savybė leidžia priskirti pavadinimą elementui, kuris dalyvaus vaizdo perėjime. Kai du elementai skirtinguose puslapiuose turi tą patį `view-transition-name`, naršyklė bandys sukurti sklandų perėjimą tarp jų. Tai ypač naudinga kuriant bendrų elementų perėjimus, kai atrodo, kad elementas sklandžiai juda iš vieno puslapio į kitą.

3. Valdymas naudojant JavaScript

Nors API daugiausia valdomas CSS, perėjimo procesą taip pat galite valdyti naudodami JavaScript. Pavyzdžiui, galite klausytis `view-transition-ready` įvykio, kad atliktumėte veiksmus prieš prasidedant perėjimui, arba `view-transition-finished` įvykio, kad įvykdytumėte kodą po perėjimo pabaigos.


document.startViewTransition(() => {
  // Atnaujinkite DOM
  return Promise.resolve(); // Pasirinktinai: grąžinkite pažadą
}).then((transition) => {
  transition.finished.then(() => {
    // Perėjimas baigtas
    console.log('Perėjimas baigtas!');
  });
});

`transition.finished` savybė grąžina pažadą (promise), kuris išsipildo, kai perėjimas baigiasi. Tai leidžia atlikti veiksmus, tokius kaip papildomo turinio įkėlimas ar vartotojo sąsajos atnaujinimas po animacijos pabaigos.

4. Asinchroninių operacijų tvarkymas

Atliekant DOM atnaujinimus `document.startViewTransition()` atgalinio iškvietimo funkcijoje, galite grąžinti pažadą (Promise), kad užtikrintumėte, jog perėjimas neprasidės, kol nebus baigta asinchroninė operacija. Tai naudinga scenarijuose, kai reikia gauti duomenis iš API prieš atnaujinant vartotojo sąsają.


function updateContent(newContent) {
  document.startViewTransition(() => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // Atnaujinkite DOM gautais duomenimis
        document.querySelector('#content').innerHTML = data.content;
      });
  });
}

5. Individualūs CSS perėjimai

Tikroji vaizdo perėjimų API galia slypi galimybėje pritaikyti perėjimus naudojant CSS. Galite naudoti CSS animacijas ir perėjimus, kad sukurtumėte įvairiausius efektus, tokius kaip išblukimai, slydimai, priartinimai ir kt. Eksperimentuokite su skirtingomis CSS savybėmis, kad pasiektumėte norimą vizualinį efektą.

CSS:


::view-transition-old(root) {
  animation: slideOut 0.5s ease-in-out forwards;
}

::view-transition-new(root) {
  animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

Šis pavyzdys sukuria slydimo perėjimo efektą.

Naršyklių suderinamumas ir polifilai

CSS vaizdo perėjimų API yra santykinai nauja funkcija, todėl naršyklių palaikymas vis dar tobulinamas. 2023 m. pabaigoje Chrome ir Edge turėjo gerą palaikymą. Firefox ir Safari dirba prie jos įgyvendinimo. Prieš naudojant API produkcinėje aplinkoje, svarbu patikrinti dabartinį naršyklių suderinamumą ir apsvarstyti galimybę naudoti polifilą (polyfill) senesnėms naršyklėms. Polifilas yra JavaScript kodo dalis, kuri suteikia naujesnės funkcijos funkcionalumą senesnėms naršyklėms, kurios jos natūraliai nepalaiko.

Galite naudoti polifilą, pavyzdžiui, šį iš GitHub, kad užtikrintumėte palaikymą naršyklėms, kurios dar neturi vietinio palaikymo. Nepamirškite kruopščiai išbandyti savo programą skirtingose naršyklėse, kad užtikrintumėte nuoseklią vartotojo patirtį.

Gerosios praktikos ir svarstymai

Panaudojimo atvejai ir pavyzdžiai

CSS vaizdo perėjimų API gali būti naudojamas įvairiuose scenarijuose, siekiant pagerinti vartotojo patirtį:

Globalūs aspektai

Įgyvendinant vaizdo perėjimų API globaliai prieinamoje svetainėje, atsižvelkite į šiuos dalykus:

Išvada

CSS vaizdo perėjimų API yra galingas įrankis, skirtas pagerinti vartotojo patirtį ir kurti patrauklesnes žiniatinklio programas. Supaprastindamas sklandžių ir vizualiai patrauklių perėjimų kūrimo procesą, API leidžia programuotojams sutelkti dėmesį į geresnės bendros patirties teikimą savo vartotojams. Nors naršyklių palaikymas vis dar tobulinamas, potenciali vaizdo perėjimų API nauda yra akivaizdi. Kai API taps plačiau pritaikomas, jis greičiausiai taps esminiu įrankiu front-end programuotojo įrankių rinkinyje. Priimkite šią naują technologiją ir pakelkite savo žiniatinklio programas į kitą lygį.

Suprasdami šiame vadove aprašytas koncepcijas ir technikas, galite pradėti naudoti CSS vaizdo perėjimų API, kad sukurtumėte labiau išbaigtas ir patrauklesnes žiniatinklio programas. Eksperimentuokite su skirtingais perėjimais, pritaikykite juos pagal savo konkrečius poreikius ir visada teikite pirmenybę vartotojo patirčiai bei prieinamumui. Vaizdo perėjimų API yra galingas įrankis, kuris gali padėti jums sukurti žiniatinklio programas, kurios yra ir vizualiai patrauklios, ir labai funkcionalios.