CSS-näkymäsiirtymät: Saumattomien ja mukaansatempaavien navigointikokemusten luominen

Verkkokehityksen jatkuvasti kehittyvässä maisemassa käyttäjäkokemus on ylin. Keskeinen osa positiivista käyttäjäkokemusta on sujuva ja intuitiivinen navigointi. Menneet ovat ne päivät, jolloin sivut ladataan nykivästi; käyttäjät odottavat nyt saumattomia siirtymiä, jotka opastavat heitä vaivattomasti verkkosivuston läpi. CSS-näkymäsiirtymät, tehokas ja suhteellisen uusi tekniikka, tarjoavat tavan saavuttaa juuri sen.

Mitä CSS-näkymäsiirtymät ovat?

CSS-näkymäsiirtymät tarjoavat mekanismin animoida visuaalisen muunnoksen kahden eri tilan välillä verkkosivustolla, tyypillisesti eri sivuilla tai osioissa. Sen sijaan, että siirtyisimme yhtäkkiä näkymästä toiseen, näkymäsiirtymät luovat sujuvan, animoidun virtauksen, joka tuntuu luonnollisemmalta ja mukaansatempaavammalta. Tämä johtaa hiotumman ja ammattimaisemman käyttäjäkokemuksen.

Pohjimmiltaan selain ottaa tilannekuvia vanhoista ja uusista tiloista, tunnistaa yhteiset elementit ja animoi niiden liikettä, kokoa ja ulkonäköä. Tämä luo illuusion jatkuvuudesta ja auttaa käyttäjiä säilyttämään kontekstintajunsa sivustolla navigoitaessa.

CSS-näkymäsiirtymien käytön edut

• Parannettu käyttäjäkokemus: Sujuvat siirtymät tekevät navigoinnista luonnollisempaa ja vähemmän häiritsevää.
• Lisääntynyt sitoutuminen: Mukaansatempaavat animaatiot vangitsevat käyttäjän huomion ja tekevät selauskokemuksesta nautinnollisemman.
• Kontekstuaalinen tietoisuus: Siirtymät auttavat käyttäjiä ymmärtämään, miten eri sivut tai osiot liittyvät toisiinsa.
• Koettu suorituskyvyn parannus: Vaikka todellinen latausaika pysyisi samana, sujuvat siirtymät voivat saada verkkosivuston tuntumaan nopeammalta ja reagoivammalta.
• Moderni ja hiottu muotoilu: Näkymäsiirtymät edistävät modernimpaa ja hienostuneempaa verkkosivuston estetiikkaa.

CSS-näkymäsiirtymien perusoteutus

Yksinkertaisin tapa toteuttaa CSS-näkymäsiirtymiä on käyttää sisäänrakennettua selaintoimintoa, jonka laukaisevat saman alkuperän navigoinnit. JavaScriptiä ei välttämättä tarvita kaikkein yksinkertaisimpiin siirtymiin.

1. Näkymäsiirtymien käyttöönotto

Ota näkymäsiirtymät käyttöön saman alkuperän navigoinneissa käynnistämällä selaimen navigointi (esim. linkin napsautus) ja varmistamalla, että selain tukee näkymäsiirtymiä. Vuoden 2023 lopulla / vuoden 2024 alussa selainten tuki on hyvä suurimmissa selaimissa (Chrome, Edge, Firefox), mutta polyfillejä tai ehdollista logiikkaa voidaan tarvita vanhemmille selaimille.

2. HTML:n perusrakenne

Ota huomioon kaksi yksinkertaista HTML-sivua, `index.html` ja `about.html`:

            
<!-- index.html -->
<a href="about.html">Siirry Tietoja-sivulle</a>

            

              
                Copy
              
            
          

            
<!-- about.html -->
<a href="index.html">Palaa kotisivulle</a>

            

              
                Copy
              
            
          

Selaintuella näitä linkkejä napsauttamalla käynnistyy automaattisesti yksinkertainen näkymäsiirtymä, jossa sivut häivytetään ristiin.

Edistyneet tekniikat: Näkymäsiirtymien mukauttaminen JavaScriptillä

Vaikka selaimen oletuskäyttäytyminen tarjoaa yksinkertaisen ristihäivytyksen, näkymäsiirtymien todellinen voima piilee mukauttamisessa. Tämä saavutetaan pääasiassa JavaScriptillä.

1. `document.startViewTransition()`

`document.startViewTransition()` -metodi on avain mukautettujen näkymäsiirtymien käynnistämiseen ja hallintaan. Se ottaa argumenttina takaisinkutsufunktion, joka suoritetaan, kun siirtymä alkaa.

            
const transitionLink = document.querySelector('#transition-link');

transitionLink.addEventListener('click', (event) => {
  event.preventDefault(); // Estä linkin oletuskäyttäytyminen
  const url = transitionLink.href;

  document.startViewTransition(() => {
    // Päivitä DOM uudella sisällöllä
    window.location.href = url; // Siirry uuteen URL-osoitteeseen
  });
});

            

              
                Copy
              
            
          

Tämä esimerkki estää linkin oletuskäyttäytymisen ja käyttää sitten `startViewTransition`-metodia käynnistääkseen siirtymän ennen uuteen URL-osoitteeseen siirtymistä. Takaisinkutsu päivittää DOM:n (tässä tapauksessa navigoimalla, mutta se voisi sisältää sisällön korvaamisen ilman sivun täydellistä uudelleenlatausta).

2. Näkymäsiirtymän elinkaaren ymmärtäminen

`document.startViewTransition()` palauttaa `ViewTransition`-objektin, jossa on useita lupauksia, jotka edustavat siirtymän eri vaiheita:

• `ready`: Ratkaisee, kun pseudo-elementin tilannekuva on luotu ja siirtymä on valmis alkamaan.
• `updateCallbackDone`: Ratkaisee sen jälkeen, kun `startViewTransition()`-metodille välitetty takaisinkutsufunktio on suoritettu. Tämä on aika päivittää DOM.
• `finished`: Ratkaisee, kun animaatio on valmis ja uusi näkymä on täysin näkyvissä.
• `skipped`: Ratkaisee, jos siirtymä ohitetaan (esim. selaimen rajoitusten tai käyttäjän asetusten vuoksi).

Voit käyttää näitä lupauksia järjestääksesi monimutkaisempia animaatioita ja vuorovaikutuksia siirtymän aikana.

3. Nimetyt näkymäsiirtymät ominaisuudella `view-transition-name`

`view-transition-name` CSS-ominaisuus on olennainen jaettujen elementtien siirtymien luomisessa. Sen avulla voit tunnistaa elementit, jotka tulisi animoida vanhojen ja uusien näkymien välillä. Elementtejä, joilla on sama `view-transition-name`, käsitellään samana elementtinä siirtymän aikana.

Esimerkki:

Oletetaan, että sinulla on tuotekuva, jonka haluat siirtyvän sujuvasti tuoteluettelosivun ja tuotteen tietosivun välillä.

            
<!-- Tuoteluettelosivu -->
<a href="product-detail.html">
  <img src="product.jpg" alt="Tuotekuva" style="view-transition-name: product-image;">
</a>

<!-- Tuotteen tietosivu -->
<img src="product.jpg" alt="Tuotekuva" style="view-transition-name: product-image;">

            

              
                Copy
              
            
          

Antamalla molemmille kuville saman `view-transition-name`, selain animoi automaattisesti kuvan sijainnin ja koon siirtymän aikana.

4. Näkymäsiirtymien tyylittely CSS:llä

CSS-pseudo-elementit tarjoavat tarkan hallinnan näkymäsiirtymän ulkoasuun:

• `::view-transition`: Edustaa koko näkymäsiirtymän animaatiota.
• `::view-transition-group(*)`: Edustaa elementtiryhmää, jotka siirtyvät yhdessä, tunnistettuna `view-transition-name`-ominaisuudella. `*` on yleismerkki, joka voidaan korvata tietyllä nimellä.
• `::view-transition-image-pair(*)`: Edustaa kuvaparia (vanha ja uusi) siirtyvälle elementille.
• `::view-transition-old(*)`: Edustaa vanhaa kuvaa siirtymän aikana.
• `::view-transition-new(*)`: Edustaa uutta kuvaa siirtymän aikana.

Voit käyttää näitä pseudo-elementtejä mukauttamaan animaatiota, peittävyyttä, muunnoksia ja muita siirtymän visuaalisia ominaisuuksia.

Esimerkki: Animaation mukauttaminen

            
::view-transition-old(product-image), /* Katoava kuva */
::view-transition-new(product-image) { /* Näkyviin tuleva kuva */
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(product-image) {
  animation-name: fade-out;
}

::view-transition-new(product-image) {
  animation-name: fade-in;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

            

              
                Copy
              
            
          

Tämä esimerkki käyttää haalistus- ja haalistuspoistoanimaatiota tuotekuvaan siirtymän aikana, mikä antaa sille sujuvamman ulkonäön.

5. Esimerkki: Siirtyminen luettelo- ja tietosivunäkymien välillä

Tämä esimerkki havainnollistaa yleisen käyttötapauksen: siirtymisen luettelon kohteiden ja valitun kohteen tietosivunäkymän välillä. Tämä edellyttää Javascriptiä sivun täydellisen latauksen välttämiseksi.

            
<!-- Luettelonäkymä -->
<ul id="item-list">
  <li><a href="#item1" data-item-id="item1" class="item-link"><img src="item1.jpg" style="view-transition-name: item1;">Kohde 1</a></li>
  <li><a href="#item2" data-item-id="item2" class="item-link"><img src="item2.jpg" style="view-transition-name: item2;">Kohde 2</a></li>
</ul>

<!-- Tietosivunäkymä (aluksi piilotettu) -->
<div id="detail-view" style="display: none;">
  <img id="detail-image" src="" style="view-transition-name: item1;">
  <h2 id="detail-title"></h2>
  <p id="detail-description"></p>
  <button id="back-button">Takaisin luetteloon</button>
</div>

            

              
                Copy
              
            
          

            
const itemList = document.getElementById('item-list');
const detailView = document.getElementById('detail-view');
const detailImage = document.getElementById('detail-image');
const detailTitle = document.getElementById('detail-title');
const detailDescription = document.getElementById('detail-description');
const backButton = document.getElementById('back-button');

itemList.addEventListener('click', (event) => {
  if (event.target.classList.contains('item-link')) {
    event.preventDefault();
    const itemId = event.target.dataset.itemId;

    document.startViewTransition(() => {
      // Päivitä tietosivunäkymä valitun kohteen tiedoilla
      detailImage.src = `${itemId}.jpg`;
      detailTitle.textContent = `Kohde ${itemId.slice(4)}`; // Poista 'item'-etuliite
      detailDescription.textContent = `Kuvaus kohteelle ${itemId}`;// Korvaa todellisilla tiedoilla

      // Varmista, että view-transition-name on oikein.
      detailImage.style.viewTransitionName = itemId; //Ratkaiseva rivi
      // Piilota luettelonäkymä ja näytä tietosivunäkymä
      itemList.style.display = 'none';
      detailView.style.display = 'block';
    });
  }
});

backButton.addEventListener('click', () => {
  document.startViewTransition(() => {
    // Piilota tietosivunäkymä ja näytä luettelonäkymä
    itemList.style.display = 'block';
    detailView.style.display = 'none';
  });
});


            

              
                Copy
              
            
          

Tässä esimerkissä luettelokohdetta napsauttamalla käynnistetään näkymäsiirtymä. JavaScript päivittää dynaamisesti tietosivunäkymän sisällön valittuun kohteeseen liittyvillä tiedoilla. Ratkaisevaa on määrittää oikea `view-transition-name` dynaamisesti tietosivun kuvalle ennen sen näkyväksi tekemistä Javascriptin avulla sen perusteella, mitä kohdetta napsautettiin. Kun paluupainiketta napsautetaan, käynnistetään toinen näkymäsiirtymä, joka palauttaa käyttäjän luettelonäkymään.

6. Asynkroniset toiminnot ja näkymäsiirtymät

Kun käsitellään asynkronisia toimintoja (esim. tietojen noutaminen API:sta), on tärkeää varmistaa, että näkymäsiirtymä alkaa vasta, kun tiedot on ladattu.

            
async function loadData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

async function transitionToDetail(itemId) {
  document.startViewTransition(async () => {
    const data = await loadData(`/api/items/${itemId}`);

    // Päivitä tietosivunäkymä haetuilla tiedoilla
    detailImage.src = data.imageUrl;
    detailTitle.textContent = data.title;
    detailDescription.textContent = data.description;

    // Päivitä näkymäsiirtymän nimi
    detailImage.style.viewTransitionName = itemId;

    itemList.style.display = 'none';
    detailView.style.display = 'block';
  });
}

            

              
                Copy
              
            
          

Tässä esimerkissä `transitionToDetail`-funktio käyttää `async/await`-ominaisuutta varmistaakseen, että tiedot ladataan ennen DOM:n päivittämistä ja näkymäsiirtymän aloittamista. Tämä estää siirtymän käynnistymisen ennenaikaisesti ja virheellisen tai puutteellisen sisällön näyttämisen.

Huomioitavaa ja parhaat käytännöt

• Suorituskyky: Vaikka näkymäsiirtymät parantavat käyttäjäkokemusta, on tärkeää olla tietoinen suorituskyvystä. Monimutkaiset animaatiot voivat olla resurssi-intensiivisiä, joten optimoi koodisi ja resurssisi vastaavasti. Harkitse `will-change`-ominaisuuden käyttämistä varovasti antaaksesi selaimelle vihjeen siitä, mitkä ominaisuudet todennäköisesti muuttuvat, mikä parantaa animaation suorituskykyä.
• Saavutettavuus: Varmista, että näkymäsiirtymäsi ovat vammaisten käyttäjien käytettävissä. Tarjoa vaihtoehtoisia tapoja navigoida sivustolla käyttäjille, jotka eivät ehkä pysty havaitsemaan tai olemaan vuorovaikutuksessa animaatioiden kanssa. Harkitse `prefers-reduced-motion`-mediakyselyn käyttöä siirtymien poistamiseen käytöstä tai yksinkertaistamiseen käyttäjille, jotka ovat ilmoittaneet haluavansa vähentää liikettä.
• Selaimen yhteensopivuus: Tarkista selaimen yhteensopivuus ennen näkymäsiirtymien toteuttamista. Suhteellisen uutena tekniikkana sitä ei ehkä tueta kaikissa selaimissa. Käytä ominaisuuksien tunnistusta ja tarjoa vararatkaisuja vanhemmille selaimille. Polyfillejä on saatavana joillekin selaimille, mutta ne eivät välttämättä toista täydellisesti alkuperäistä käyttäytymistä.
• Pidä se yksinkertaisena: Vaikka olisi houkuttelevaa luoda monimutkaisia animaatioita, on usein parasta pitää näkymäsiirtymät yksinkertaisina ja hienovaraisina. Liian monimutkaiset siirtymät voivat olla häiritseviä ja vaikuttaa negatiivisesti käyttäjäkokemukseen. Keskity selkeyteen ja kontekstiin sen sijaan, että käytät räikeitä tehosteita.
• Merkitykselliset siirtymät: Varmista, että näkymäsiirtymät ovat merkityksellisiä ja palvelevat tarkoitusta. Niiden tulisi auttaa käyttäjiä ymmärtämään eri sivujen tai sivuston osien välistä suhdetta, ei vain olla koristeellisia elementtejä.
• Testaus: Testaa näkymäsiirtymäsi perusteellisesti eri laitteilla ja selaimilla varmistaaksesi, että ne toimivat odotetusti. Kiinnitä huomiota suorituskykyyn ja saavutettavuuteen. Käytä selaimen kehittäjätyökaluja profiloidaksesi animaation suorituskyvyn ja tunnistaaksesi mahdolliset pullonkaulat.

Globaalit esimerkit ja käyttötapaukset

CSS-näkymäsiirtymiä voidaan soveltaa eri yhteyksissä käyttäjäkokemuksen parantamiseksi maailmanlaajuisesti:

• Verkkokauppa: Siirtyminen tuoteluetteloiden ja tietosivujen välillä, tuotteiden lisääminen ostoskoriin. Varmista globaalille yleisölle, että tuotekuvat ja -kuvaukset on lokalisoitu.
• Uutiset ja media: Animointi artikkelien esikatseluiden ja täysien artikkelien välillä, navigointi verkkosivuston osioiden välillä. Sovita suunnittelu vastaamaan erilaisia kulttuurisia mieltymyksiä tiedon esittämiselle.
• Matkailu ja turismi: Sujuva siirtyminen kohteiden välillä, hotellien tai nähtävyyksien tietojen näyttäminen. Tarjoa lokalisoitua sisältöä ja usean valuutan vaihtoehtoja.
• Portfolio-verkkosivustot: Mukaansatempaavien siirtymien luominen projektien välillä, taitojen ja kokemuksen esittely. Käännä portfolio-sisältö useille kielille laajemman kattavuuden saavuttamiseksi.
• Yhden sivun sovellukset (SPA): Saumattoman navigoinnin tarjoaminen SPA:ssa ilman sivun täydellistä uudelleenlatausta. Optimoi suorituskyky eri verkko-olosuhteissa ja maailmanlaajuisesti käytetyissä laitteissa.
• Dokumentointisivustot: Antaa käyttäjille mahdollisuuden siirtyä nopeasti aiheiden välillä ja säilyttää keskittymiskyky.

Johtopäätös

CSS-näkymäsiirtymät tarjoavat tehokkaan tavan luoda saumattomia ja mukaansatempaavia navigointikokemuksia verkossa. Ymmärtämällä perusperiaatteet ja edistyneet tekniikat kehittäjät voivat luoda visuaalisesti houkuttelevia ja intuitiivisia verkkosivustoja, jotka parantavat käyttäjätyytyväisyyttä. Selaimen tuen kasvaessa näkymäsiirtymistä on tulossa olennainen työkalu nykyaikaisen verkkokehittäjän työkalupakissa.

Hyödynnä sujuvien siirtymien voima ja nosta verkkosivustosi käyttäjäkokemus uudelle tasolle. Toteuttamalla CSS-näkymäsiirtymiä strategisesti ja harkiten voit luoda verkkosivustoja, jotka eivät ole vain visuaalisesti houkuttelevia, vaan myös intuitiivisia, helppokäyttöisiä ja suorituskykyisiä riippumatta käyttäjän sijainnista tai laitteesta.

Resurssit

• MDN Web Docs: View Transitions API
• web.dev: Smooth and simple transitions with the View Transitions API