CSS skata pāreju stāvokļa saglabāšana: animācijas stāvokļa atjaunošana

CSS skata pārejas (View Transitions) ir jauna, jaudīga funkcija, kas ļauj izstrādātājiem veidot plūstošas un vizuāli pievilcīgas pārejas starp dažādiem tīmekļa lietotnes stāvokļiem. Lai gan sākotnējā implementācija koncentrējās uz pamata pārejām, būtisks aspekts patiesi noslīpētas lietotāja pieredzes radīšanā ir stāvokļa saglabāšanas un animācijas atjaunošanas apstrāde, īpaši pārvietojoties atpakaļ un uz priekšu starp lapām vai sadaļām.

Izpratne par stāvokļa saglabāšanas nepieciešamību

Iedomājieties lietotāju, kurš pārvietojas pa foto galeriju. Katrs klikšķis ar patīkamu animāciju pārslēdz uz nākamo attēlu. Tomēr, ja lietotājs pārlūkprogrammā nospiež pogu "atpakaļ", viņš sagaida, ka animācija notiks apgrieztā secībā un atgriezīs viņu iepriekšējā attēla stāvoklī. Bez stāvokļa saglabāšanas pārlūkprogramma var vienkārši pārlēkt atpakaļ uz iepriekšējo lapu bez jebkādas pārejas, radot saraustītu un nekonsekventu pieredzi.

Stāvokļa saglabāšana nodrošina, ka lietotne atceras iepriekšējo saskarnes stāvokli un var plūstoši pāriet atpakaļ uz to. Tas ir īpaši svarīgi vienas lapas lietotnēm (SPA), kur navigācija bieži ietver DOM manipulācijas bez pilnīgas lapas pārlādes.

Pamata skata pārejas: Atkārtojums

Pirms iedziļināmies stāvokļa saglabāšanā, ātri atkārtosim CSS skata pāreju pamatus. Galvenais mehānisms ietver stāvokli mainošā koda ievietošanu document.startViewTransition():

  document.startViewTransition(() => {
    // Atjaunināt DOM uz jauno stāvokli
    updateTheDOM();
  });

Pārlūkprogramma pēc tam automātiski notver attiecīgo DOM elementu veco un jauno stāvokli un animē pāreju starp tiem, izmantojot CSS. Jūs varat pielāgot animāciju, izmantojot CSS īpašības, piemēram, transition-behavior: view-transition;.

Izaicinājums: animācijas stāvokļa saglabāšana, navigējot atpakaļ

Lielākais izaicinājums rodas, kad lietotājs izraisa "atpakaļ" navigācijas notikumu, parasti nospiežot pārlūkprogrammas atpakaļ pogu. Pārlūkprogrammas noklusējuma uzvedība bieži ir atjaunot lapu no kešatmiņas, faktiski apejot View Transition API. Tas noved pie iepriekš minētā saraustītā lēciena atpakaļ uz iepriekšējo stāvokli.

Risinājumi animācijas stāvokļa atjaunošanai

Lai risinātu šo izaicinājumu un nodrošinātu plūstošu animācijas stāvokļa atjaunošanu, var izmantot vairākas stratēģijas.

1. History API un popstate notikuma izmantošana

History API nodrošina detalizētu kontroli pār pārlūkprogrammas vēstures steku. Pievienojot jaunus stāvokļus vēstures stekam ar history.pushState() un klausoties popstate notikumu, jūs varat pārtvert atpakaļ navigāciju un izraisīt apgrieztu skata pāreju.

Piemērs:

  // Funkcija, lai pārietu uz jaunu stāvokli
  function navigateTo(newState) {
    document.startViewTransition(() => {
      updateTheDOM(newState);
      history.pushState(newState, null, newState.url);
    });
  }

  // Klausīties popstate notikumu
  window.addEventListener('popstate', (event) => {
    const state = event.state;
    if (state) {
      document.startViewTransition(() => {
        updateTheDOM(state); // Atgriezties iepriekšējā stāvoklī
      });
    }
  });

Šajā piemērā navigateTo() atjaunina DOM un pievieno jaunu stāvokli vēstures stekam. popstate notikuma klausītājs pēc tam pārtver atpakaļ navigāciju un izraisa citu skata pāreju, lai atgrieztos iepriekšējā stāvoklī. Galvenais šeit ir saglabāt pietiekami daudz informācijas state objektā, kas tiek nodots ar `history.pushState`, lai ļautu jums atjaunot iepriekšējo DOM stāvokli updateTheDOM funkcijā. Tas bieži vien ietver attiecīgo datu saglabāšanu, kas tika izmantoti, lai renderētu iepriekšējo skatu.

2. Page Visibility API izmantošana

Page Visibility API ļauj noteikt, kad lapa kļūst redzama vai slēpta. Kad lietotājs pārvietojas prom no lapas, tā kļūst slēpta. Kad viņi atgriežas, tā atkal kļūst redzama. Jūs varat izmantot šo API, lai izraisītu apgrieztu skata pāreju, kad lapa kļūst redzama pēc tam, kad tā ir bijusi slēpta.

Piemērs:

  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      document.startViewTransition(() => {
        // Atgriezties iepriekšējā stāvoklī, pamatojoties uz kešotiem datiem
        revertToPreviousState();
      });
    }
  });

Šī pieeja balstās uz iepriekšējā DOM stāvokļa kešošanu, pirms lapa kļūst slēpta. Funkcija revertToPreviousState() pēc tam izmantotu šos kešotos datus, lai atjaunotu iepriekšējo skatu un uzsāktu apgriezto pāreju. To var būt vienkāršāk īstenot nekā History API pieeju, taču tā prasa rūpīgu kešoto datu pārvaldību.

3. History API un Session Storage apvienošana

Sarežģītākos scenārijos jums var nākties apvienot History API ar sesijas krātuvi (session storage), lai saglabātu ar animāciju saistītus datus. Sesijas krātuve ļauj saglabāt datus, kas saglabājas starp lapu navigācijām tajā pašā pārlūkprogrammas cilnē. Jūs varat saglabāt animācijas stāvokli (piemēram, pašreizējo kadru vai progresu) sesijas krātuvē un izgūt to, kad lietotājs atgriežas lapā.

Piemērs:

  // Pirms došanās prom:
  sessionStorage.setItem('animationState', JSON.stringify(currentAnimationState));

  // Lapas ielādes vai popstate notikuma brīdī:
  const animationState = JSON.parse(sessionStorage.getItem('animationState'));
  if (animationState) {
    document.startViewTransition(() => {
      // Atjaunot animācijas stāvokli un izsaukt apgriezto pāreju
      restoreAnimationState(animationState);
    });
  }

Šis piemērs pirms navigācijas prom saglabā currentAnimationState (kas varētu ietvert informāciju par animācijas progresu, pašreizējo kadru vai jebkurus citus attiecīgus datus) sesijas krātuvē. Kad lapa tiek ielādēta vai tiek izsaukts popstate notikums, animācijas stāvoklis tiek izgūts no sesijas krātuves un izmantots, lai atjaunotu animāciju tās iepriekšējā stāvoklī.

4. Ietvara vai bibliotēkas izmantošana

Daudzi modernie JavaScript ietvari un bibliotēkas (piemēram, React, Vue.js, Angular) nodrošina iebūvētus mehānismus stāvokļa pārvaldībai un navigācijai. Šie ietvari bieži vien abstrahē History API sarežģītību un nodrošina augstāka līmeņa API stāvokļa un pāreju pārvaldībai. Lietojot ietvaru, apsveriet tā iebūvēto funkciju izmantošanu stāvokļa saglabāšanai un animācijas atjaunošanai.

Piemēram, React vidē jūs varētu izmantot stāvokļa pārvaldības bibliotēku, piemēram, Redux vai Zustand, lai saglabātu lietotnes stāvokli un nodrošinātu tā noturību starp lapu navigācijām. Pēc tam jūs varat izmantot React Router, lai pārvaldītu navigāciju un izraisītu skata pārejas, pamatojoties uz lietotnes stāvokli.

Labākās prakses stāvokļa saglabāšanas ieviešanai

• Minimizējiet saglabājamo datu apjomu: saglabājiet tikai būtiskos datus, kas nepieciešami iepriekšējā stāvokļa atjaunošanai. Lielu datu apjomu glabāšana var ietekmēt veiktspēju.
• Izmantojiet efektīvu datu serializāciju: glabājot datus sesijas krātuvē, izmantojiet efektīvas serializācijas metodes, piemēram, JSON.stringify(), lai samazinātu krātuves izmēru.
• Apstrādājiet robežgadījumus: apsveriet tādus robežgadījumus kā, piemēram, kad lietotājs pirmo reizi apmeklē lapu (t.i., nav iepriekšējā stāvokļa).
• Rūpīgi testējiet: testējiet stāvokļa saglabāšanas un animācijas atjaunošanas mehānismu dažādās pārlūkprogrammās un ierīcēs.
• Ņemiet vērā pieejamību: nodrošiniet, ka pārejas ir pieejamas lietotājiem ar invaliditāti. Nodrošiniet alternatīvus veidus, kā pārvietoties pa lietotni, ja pārejas ir traucējošas.

Koda piemēri: Dziļāks ieskats

Paplašināsim iepriekšējos piemērus ar detalizētākām koda fragmentiem.

1. piemērs: History API ar detalizētu stāvokli

  // Sākotnējais stāvoklis
  let currentState = {
    page: 'home',
    data: {},
    scrollPosition: 0 // Piemērs: Saglabāt ritināšanas pozīciju
  };

  function updateTheDOM(newState) {
    // Atjaunina DOM, pamatojoties uz newState (aizstājiet ar savu faktisko loģiku)
    console.log('Atjaunina DOM uz:', newState);
    document.getElementById('content').innerHTML = `
Pārgāja uz: ${newState.page}
`;
    window.scrollTo(0, newState.scrollPosition); // Atjaunot ritināšanas pozīciju
  }

  function navigateTo(page) {
    document.startViewTransition(() => {
      // 1. Atjaunināt DOM
      currentState = {
        page: page,
        data: {},
        scrollPosition: 0 // Atiestatīt ritināšanu vai saglabāt to
      };
      updateTheDOM(currentState);

      // 2. Pievienot jauno stāvokli vēsturei
      history.pushState(currentState, null, '#' + page); // Izmantot "hash" vienkāršai maršrutēšanai
    });
  }

  window.addEventListener('popstate', (event) => {
    document.startViewTransition(() => {
      // 1. Atgriezties iepriekšējā stāvoklī
      const state = event.state;
      if (state) {
        currentState = state;
        updateTheDOM(currentState);
      } else {
        // Apstrādāt sākotnējo lapas ielādi (vēl nav stāvokļa)
        navigateTo('home'); // Vai citu noklusējuma stāvokli
      }
    });
  });

  // Sākotnējā ielāde: Aizstāt sākotnējo stāvokli, lai novērstu problēmas ar atpakaļ pogu
  history.replaceState(currentState, null, '#home');

  // Lietošanas piemērs:
  document.getElementById('link-about').addEventListener('click', (e) => {
    e.preventDefault();
    navigateTo('about');
  });

  document.getElementById('link-contact').addEventListener('click', (e) => {
    e.preventDefault();
    navigateTo('contact');
  });

Paskaidrojums:

• currentState objekts tagad satur specifiskāku informāciju, piemēram, pašreizējo lapu, patvaļīgus datus un ritināšanas pozīciju. Tas ļauj pilnīgāk atjaunot stāvokli.
• updateTheDOM funkcija simulē DOM atjaunināšanu. Aizstājiet viettura loģiku ar savu faktisko DOM manipulācijas kodu. Būtiski, ka tā arī atjauno ritināšanas pozīciju.
• history.replaceState sākotnējā ielādē ir svarīgs, lai izvairītos no tā, ka atpakaļ poga uzreiz atgriež tukšā lapā pēc sākotnējās ielādes.
• Piemērs vienkāršības labad izmanto uz "hash" balstītu maršrutēšanu. Reālā lietotnē jūs, visticamāk, izmantotu robustākus maršrutēšanas mehānismus.

2. piemērs: Page Visibility API ar kešošanu

  let cachedDOM = null;

  function captureDOM() {
    // Klonēt attiecīgo DOM daļu
    const contentElement = document.getElementById('content');
    cachedDOM = contentElement.cloneNode(true); // Dziļā klonēšana
  }

  function restoreDOM() {
    if (cachedDOM) {
      const contentElement = document.getElementById('content');
      contentElement.parentNode.replaceChild(cachedDOM, contentElement); // Aizstāt ar kešoto versiju
      cachedDOM = null; // Notīrīt kešatmiņu
    } else {
      console.warn('Nav kešota DOM, ko atjaunot.');
    }
  }

  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
      captureDOM(); // Notvert DOM pirms paslēpšanas
    }

    if (document.visibilityState === 'visible') {
      document.startViewTransition(() => {
        restoreDOM(); // Atjaunot DOM, kļūstot redzamam
      });
    }
  });

  // Lietošanas piemērs (simulēt navigāciju)
  function navigateAway() {
    document.getElementById('content').innerHTML = '
Pārvietojas prom...
';
    // Simulēt aizkavi (piem., AJAX pieprasījums)
    setTimeout(() => {
      //Reālā lietotnē jūs šeit varētu pāriet uz citu lapu.
      console.log("Simulēta pārvietošanās prom.");
    }, 1000);
  }

  document.getElementById('navigate').addEventListener('click', navigateAway);

Paskaidrojums:

• Šis piemērs koncentrējas uz DOM klonēšanu un atjaunošanu. Tā ir vienkāršota pieeja un var nebūt piemērota visiem scenārijiem, īpaši sarežģītām SPA.
• captureDOM funkcija klonē #content elementu. Dziļā klonēšana ir būtiska, lai notvertu visus bērnu elementus un to atribūtus.
• restoreDOM funkcija aizstāj pašreizējo #content ar kešoto versiju.
• navigateAway funkcija simulē navigāciju (jūs parasti to aizstātu ar faktisko navigācijas loģiku).

Papildu apsvērumi

1. Citas izcelsmes (Cross-Origin) pārejas

Skata pārejas galvenokārt ir paredzētas pārejām vienas izcelsmes (same-origin) ietvaros. Citas izcelsmes pārejas (piemēram, pāreja starp dažādiem domēniem) parasti ir sarežģītākas un var prasīt atšķirīgas pieejas, piemēram, iframe vai servera puses renderēšanas izmantošanu.

2. Veiktspējas optimizācija

Skata pārejas var ietekmēt veiktspēju, ja tās netiek rūpīgi ieviestas. Optimizējiet pārejas, veicot šādas darbības:

• Minimizējot pārejā iesaistīto DOM elementu izmēru: mazāki DOM elementi nodrošina ātrākas pārejas.
• Izmantojot aparatūras paātrinājumu: izmantojiet CSS īpašības, kas aktivizē aparatūras paātrinājumu (piemēram, transform: translate3d(0, 0, 0);).
• Pāreju "debouncing": izmantojiet "debounce" tehniku pāreju izsaukšanas loģikai, lai izvairītos no pārmērīgām pārejām, kad lietotājs strauji pārvietojas starp lapām.

3. Pieejamība

Nodrošiniet, ka skata pārejas ir pieejamas lietotājiem ar invaliditāti. Nodrošiniet alternatīvus veidus, kā pārvietoties pa lietotni, ja pārejas ir traucējošas. Apsveriet ARIA atribūtu izmantošanu, lai sniegtu papildu kontekstu ekrāna lasītājiem.

Reāli piemēri un lietošanas gadījumi

• E-komercijas produktu galerijas: plūstošas pārejas starp produktu attēliem.
• Ziņu raksti: nevainojama navigācija starp dažādām raksta sadaļām.
• Interaktīvi informācijas paneļi: plūstošas pārejas starp dažādām datu vizualizācijām.
• Mobilajām lietotnēm līdzīga navigācija tīmekļa lietotnēs: vietējo lietotņu pāreju simulēšana pārlūkprogrammā.

Noslēgums

CSS skata pārejas, apvienojumā ar stāvokļa saglabāšanas un animācijas atjaunošanas tehnikām, piedāvā jaudīgu veidu, kā uzlabot tīmekļa lietotņu lietotāja pieredzi. Rūpīgi pārvaldot pārlūkprogrammas vēsturi un izmantojot API, piemēram, Page Visibility API, izstrādātāji var radīt plūstošas un vizuāli pievilcīgas pārejas, kas liek tīmekļa lietotnēm justies atsaucīgākām un saistošākām. View Transition API attīstoties un kļūstot arvien plašāk atbalstītai, tā neapšaubāmi kļūs par būtisku rīku mūsdienu tīmekļa izstrādē.