M

MLOG

Eesti

Õppige selgeks CSS View Transitions API, et luua sujuvaid ja kaasahaaravaid leheüleminekuid. Parandage kasutajakogemust ja jõudlust sujuvate animatsioonidega.

Kasutajakogemuse parandamine: põhjalik juhend CSS View Transitions API kohta

Tänapäeva dünaamilisel veebimaastikul on kasutajakogemus (UX) esmatähtis. Sujuv navigeerimine ja kaasahaarav interaktsioon on võtmetähtsusega, et hoida kasutajaid rahulolevana ja panna neid tagasi tulema. Üks võimas tööriist selle saavutamiseks on CSS View Transitions API, suhteliselt uus brauseri funktsioon, mis võimaldab arendajatel luua sujuvaid ja visuaalselt meeldivaid üleminekuid veebirakenduse erinevate olekute või lehtede vahel.

Mis on CSS View Transitions API?

CSS View Transitions API pakub standardiseeritud viisi visuaalsete muutuste animeerimiseks, mis toimuvad veebirakenduse erinevate olekute vahel navigeerimisel. Mõelge sellest kui viisist, kuidas orkestreerida sujuvaid hajumisi, libisemisi ja muid visuaalseid efekte, kui sisu ekraanil uueneb. Enne seda API-t tuginesid arendajad sarnaste efektide saavutamiseks sageli JavaScripti teekidele ja keerukatele CSS-animatsioonidele, mis võis olla tülikas ja põhjustada jõudlusprobleeme. View Transitions API pakub sujuvamat ja jõudluselt paremat lähenemist.

API põhiidee on jäädvustada DOM-i (Document Object Model) "enne" ja "pärast" olekud ning seejärel animeerida nendevahelisi erinevusi. Brauser teeb ära suurema osa tööst animatsiooni loomisel, vabastades arendajad vajadusest kirjutada keerukat animatsioonikoodi käsitsi. See mitte ainult ei lihtsusta arendusprotsessi, vaid aitab ka tagada sujuvamad ja parema jõudlusega üleminekud.

Miks kasutada CSS View Transitions API-t?

Kuidas see töötab?

The CSS View Transitions API hõlmab peamiselt ühte JavaScripti funktsiooni: `document.startViewTransition()`. See funktsioon võtab argumendiks tagasikutsefunktsiooni (callback). Selle tagasikutse sees teete DOM-i uuendusi, mis esindavad vaadete vahelist üleminekut. Brauser jäädvustab automaatselt DOM-i "enne" ja "pärast" olekud ja loob üleminekuanimatsiooni.

Siin on lihtsustatud näide:


  function updateContent(newContent) {
    document.startViewTransition(() => {
      // Uuenda DOM-i uue sisuga
      document.querySelector('#content').innerHTML = newContent;
    });
  }

Vaatame selle koodi lähemalt:

  1. `updateContent(newContent)`: See funktsioon võtab uue kuvatava sisu argumendina.
  2. `document.startViewTransition(() => { ... });`: See on API tuum. See annab brauserile käsu alustada vaate üleminekut. Funktsioon, mis antakse argumendina `startViewTransition`-ile, käivitatakse.
  3. `document.querySelector('#content').innerHTML = newContent;`: Tagasikutse sees uuendate DOM-i uue sisuga. Siin teete lehel muudatusi, mida soovite animeerida.

Brauser tegeleb ülejäänuga. See jäädvustab DOM-i oleku enne ja pärast `innerHTML` uuendust ning loob sujuva ülemineku nende kahe oleku vahel.

Põhiline rakendamise näide

Siin on täielikum näide HTML-i, CSS-i ja JavaScriptiga:

HTML (index.html):


<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>View Transitions demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <button data-target="home">Avaleht</button>
    <button data-target="about">Meist</button>
    <button data-target="contact">Kontakt</button>
  </nav>

  <div id="content">
    <h1>Avaleht</h1>
    <p>Tere tulemast avalehele!</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

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;
}

/* Üleminevate elementide stiilid */
::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: '<h1>Avaleht</h1><p>Tere tulemast avalehele!</p>',
  about: '<h1>Meist</h1><p>Lisateavet meie kohta.</p>',
  contact: '<h1>Kontakt</h1><p>Võtke meiega ühendust.</p>',
};

function updateContent(target) {
  document.startViewTransition(() => {
    contentDiv.innerHTML = pages[target];
    document.documentElement.scrollTop = 0; // Lähtesta kerimisasend
  });
}

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

Selles näites käivitab navigeerimisnuppude klõpsamine sisu uuendamisel hajumisülemineku. CSS määratleb `fadeIn` ja `fadeOut` animatsioonid ning JavaScript kasutab `document.startViewTransition` ülemineku orkestreerimiseks.

Täpsemad tehnikad ja kohandamine

CSS View Transitions API pakub mitmeid täpsemaid funktsioone üleminekute kohandamiseks:

1. Nimega üleminekud

Saate määrata konkreetsetele elementidele nimesid, et luua sihipärasemaid üleminekuid. Näiteks võite soovida, et konkreetne pilt liiguks sujuvalt ühest asukohast teise lehtede vahel navigeerimisel.

HTML:


<img src="image1.jpg" alt="Image 1" style="view-transition-name: hero-image;">

CSS:


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

See kood määrab pildile nime `hero-image`. CSS sihib seejärel seda konkreetset üleminekugruppi, et rakendada kohandatud animatsiooni. Pseudo-element `::view-transition-group()` võimaldab teil stiilida konkreetseid üleminevaid elemente.

2. Atribuut view-transition-name

See CSS-i atribuut võimaldab teil määrata nime elemendile, mis osaleb vaate üleminekul. Kui kahel elemendil erinevatel lehtedel on sama `view-transition-name`, püüab brauser luua nende vahel sujuva ülemineku. See on eriti kasulik jagatud elementide üleminekute loomiseks, kus element näib sujuvalt ühelt lehelt teisele liikuvat.

3. Juhtimine JavaScriptiga

Kuigi API on peamiselt CSS-põhine, saate üleminekuprotsessi juhtimiseks kasutada ka JavaScripti. Näiteks saate kuulata sündmust `view-transition-ready`, et teha toiminguid enne ülemineku algust, või sündmust `view-transition-finished`, et käivitada kood pärast ülemineku lõppu.


document.startViewTransition(() => {
  // Uuenda DOM-i
  return Promise.resolve(); // Valikuline: tagasta Promise
}).then((transition) => {
  transition.finished.then(() => {
    // Üleminek on lõppenud
    console.log('Üleminek on lõpetatud!');
  });
});

Atribuut `transition.finished` tagastab Promise'i, mis laheneb, kui üleminek on lõpule viidud. See võimaldab teil sooritada toiminguid, näiteks laadida lisasisu või uuendada kasutajaliidest pärast animatsiooni lõppu.

4. Asünkroonsete operatsioonide käsitlemine

Kui teete DOM-i uuendusi `document.startViewTransition()` tagasikutse sees, saate tagastada Promise'i, et tagada, et üleminek ei alga enne asünkroonse operatsiooni lõppu. See on kasulik stsenaariumide puhul, kus peate enne kasutajaliidese uuendamist andmeid API-st hankima.


function updateContent(newContent) {
  document.startViewTransition(() => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // Uuenda DOM-i hangitud andmetega
        document.querySelector('#content').innerHTML = data.content;
      });
  });
}

5. Kohandatud CSS-üleminekud

View Transitions API tõeline jõud peitub võimes kohandada üleminekuid CSS-iga. Saate kasutada CSS-animatsioone ja üleminekuid, et luua laia valikut efekte, nagu hajumised, libisemised, suumid ja palju muud. Katsetage erinevate CSS-i atribuutidega, et saavutada soovitud visuaalne 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%); }
}

See näide loob libiseva ülemineku efekti.

Brauseri ühilduvus ja polüfillid

CSS View Transitions API on suhteliselt uus funktsioon, seega brauseritugi on endiselt arenemas. 2023. aasta lõpu seisuga on Chrome'il ja Edge'il hea tugi. Firefox ja Safari töötavad selle rakendamise kallal. Enne API kasutamist tootmises on oluline kontrollida praegust brauseri ühilduvust ja kaaluda polüfilli kasutamist vanemate brauserite jaoks. Polüfill on JavaScripti koodijupp, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites, mis seda natiivselt ei toeta.

Võite kasutada polüfilli nagu see siin GitHubis, et pakkuda tuge brauseritele, millel veel natiivset tuge ei ole. Ärge unustage oma rakendust põhjalikult testida erinevates brauserites, et tagada ühtlane kasutajakogemus.

Parimad tavad ja kaalutlused

Kasutusjuhud ja näited

CSS View Transitions API-t saab kasutada mitmesugustes stsenaariumides kasutajakogemuse parandamiseks:

Globaalsed kaalutlused

View Transitions API rakendamisel globaalselt kättesaadaval veebisaidil arvestage järgmisega:

Kokkuvõte

The CSS View Transitions API on võimas tööriist kasutajakogemuse parandamiseks ja kaasahaaravamate veebirakenduste loomiseks. Lihtsustades sujuvate ja visuaalselt meeldivate üleminekute loomise protsessi, võimaldab API arendajatel keskenduda oma kasutajatele parema üldise kogemuse pakkumisele. Kuigi brauseritugi on endiselt arenemas, on View Transitions API potentsiaalsed eelised selged. Kuna API muutub laiemalt levinuks, saab sellest tõenäoliselt esiotsa arendaja tööriistakasti oluline osa. Võtke see uus tehnoloogia omaks ja viige oma veebirakendused järgmisele tasemele.

Mõistes selles juhendis kirjeldatud kontseptsioone ja tehnikaid, saate hakata kasutama CSS View Transitions API-t, et luua viimistletumaid ja kaasahaaravamaid veebirakendusi. Katsetage erinevate üleminekutega, kohandage neid vastavalt oma konkreetsetele vajadustele ning seadke alati esikohale kasutajakogemus ja juurdepääsetavus. View Transitions API on võimas tööriist, mis aitab teil luua veebirakendusi, mis on nii visuaalselt meeldivad kui ka väga funktsionaalsed.