സിഎസ്എസ് വ്യൂ ട്രാൻസിഷൻ എപിഐ: സുഗമമായ പേജ് നാവിഗേഷൻ നടപ്പിലാക്കുന്നതിനുള്ള സമ്പൂർണ്ണ ഗൈഡ്

പതിറ്റാണ്ടുകളായി, വെബ് നാവിഗേഷൻ ഒരു അസുഖകരമായ യാഥാർത്ഥ്യത്താൽ നിർവചിക്കപ്പെട്ടിരുന്നു: ശൂന്യമായ വെളുത്ത സ്ക്രീൻ. ഒരു ലിങ്കിൽ ക്ലിക്കുചെയ്യുന്നത് ഒരു പൂർണ്ണ പേജ് റീലോഡ്, ശൂന്യതയുടെ ഒരു മിന്നൽ, തുടർന്ന് പുതിയ ഉള്ളടക്കത്തിന്റെ പെട്ടെന്നുള്ള പ്രത്യക്ഷപ്പെടൽ എന്നിവയായിരുന്നു. പ്രവർത്തനക്ഷമമാണെങ്കിലും, ഉപയോക്താക്കൾ നേറ്റീവ് ആപ്ലിക്കേഷനുകളിൽ നിന്ന് പ്രതീക്ഷിക്കുന്ന ഒഴുക്കും മിനുക്കും ഈ അനുഭവത്തിന് ഇല്ലായിരുന്നു. സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകൾ (SPAs) ഒരു പരിഹാരമായി ഉയർന്നുവന്നു, തടസ്സമില്ലാത്ത സംക്രമണങ്ങൾ സൃഷ്ടിക്കുന്നതിന് സങ്കീർണ്ണമായ ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകൾ ഉപയോഗിച്ചു, പക്ഷേ പലപ്പോഴും ഘടനാപരമായ ലാളിത്യവും പ്രാരംഭ ലോഡ് പ്രകടനവും നഷ്ടപ്പെടുത്തിക്കൊണ്ടായിരുന്നു ഇത്.

രണ്ടിന്റെയും മികച്ച വശങ്ങൾ നമുക്ക് ലഭിച്ചാലോ? മൾട്ടി-പേജ് ആപ്ലിക്കേഷന്റെ (MPA) ലളിതമായ, സെർവർ-റെൻഡർ ചെയ്ത ഘടനയും ഒരു എസ്പിഎ-യുടെ മനോഹരവും അർത്ഥവത്തായതുമായ സംക്രമണങ്ങളും. ഇതാണ് സിഎസ്എസ് വ്യൂ ട്രാൻസിഷൻ എപിഐ-യുടെ വാഗ്ദാനം, വെബിലെ ഉപയോക്തൃ അനുഭവങ്ങളെക്കുറിച്ച് നാം ചിന്തിക്കുകയും നിർമ്മിക്കുകയും ചെയ്യുന്ന രീതിയിൽ വിപ്ലവം സൃഷ്ടിക്കാൻ പോകുന്ന ഒരു തകർപ്പൻ ബ്രൗസർ ഫീച്ചറാണിത്.

ഈ സമഗ്രമായ ഗൈഡ് നിങ്ങളെ വ്യൂ ട്രാൻസിഷൻ എപിഐ-യുടെ ആഴങ്ങളിലേക്ക് കൊണ്ടുപോകും. അതെന്താണെന്നും, വെബ് ഡെവലപ്‌മെന്റിന് ഇതൊരു വലിയ മാറ്റമാകുന്നത് എന്തുകൊണ്ടാണെന്നും, എസ്പിഎ-കൾക്കും, അതിലും ആവേശകരമായി, പരമ്പരാഗത എംപിഎ-കൾക്കും വേണ്ടി നിങ്ങൾക്ക് ഇത് എങ്ങനെ നടപ്പിലാക്കാമെന്നും ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും. വെളുത്ത മിന്നലിനോട് വിട പറയാനും വെബ് നാവിഗേഷന്റെ ഒരു പുതിയ യുഗത്തിലേക്ക് സ്വാഗതം ചെയ്യാനും തയ്യാറാകൂ.

എന്താണ് സിഎസ്എസ് വ്യൂ ട്രാൻസിഷൻ എപിഐ?

വിവിധ ഡോം (ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ) അവസ്ഥകൾക്കിടയിൽ ആനിമേറ്റഡ് സംക്രമണങ്ങൾ സൃഷ്ടിക്കാൻ ഡെവലപ്പർമാരെ അനുവദിക്കുന്ന വെബ് പ്ലാറ്റ്‌ഫോമിൽ നേരിട്ട് നിർമ്മിച്ച ഒരു സംവിധാനമാണ് സിഎസ്എസ് വ്യൂ ട്രാൻസിഷൻ എപിഐ. അതിന്റെ കാതൽ, ഒരു കാഴ്‌ചയിൽ നിന്ന് മറ്റൊന്നിലേക്കുള്ള ദൃശ്യപരമായ മാറ്റം നിയന്ത്രിക്കുന്നതിനുള്ള ഒരു ലളിതമായ മാർഗ്ഗം നൽകുന്നു, ആ മാറ്റം ഒരേ പേജിൽ (ഒരു SPA-യിൽ) അല്ലെങ്കിൽ രണ്ട് വ്യത്യസ്ത ഡോക്യുമെന്റുകൾക്കിടയിൽ (ഒരു MPA-യിൽ) സംഭവിക്കുകയാണെങ്കിലും.

ഈ പ്രക്രിയ വളരെ മികച്ചതാണ്. ഒരു സംക്രമണം ആരംഭിക്കുമ്പോൾ, ബ്രൗസർ:

1. നിലവിലെ പേജിന്റെ അവസ്ഥയുടെ (പഴയ കാഴ്‌ച) ഒരു "സ്ക്രീൻഷോട്ട്" എടുക്കുന്നു.
2. പുതിയ അവസ്ഥയിലേക്ക് ഡോം അപ്ഡേറ്റ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
3. പുതിയ പേജിന്റെ അവസ്ഥയുടെ (പുതിയ കാഴ്‌ച) ഒരു "സ്ക്രീൻഷോട്ട്" എടുക്കുന്നു.
4. പഴയ കാഴ്‌ചയുടെ സ്ക്രീൻഷോട്ട് പുതിയ, ലൈവ് കാഴ്‌ചയുടെ മുകളിൽ സ്ഥാപിക്കുന്നു.
5. രണ്ടും തമ്മിലുള്ള സംക്രമണം ആനിമേറ്റ് ചെയ്യുന്നു, സാധാരണയായി സ്ഥിരസ്ഥിതിയായി സുഗമമായ ക്രോസ്-ഫേഡ് ഉപയോഗിച്ച്.

ഈ മുഴുവൻ പ്രക്രിയയും ബ്രൗസർ നിയന്ത്രിക്കുന്നതിനാൽ ഇത് ഉയർന്ന പ്രകടനം കാഴ്ചവയ്ക്കുന്നു. അതിലും പ്രധാനമായി, ഇത് ഡെവലപ്പർമാർക്ക് സാധാരണ സിഎസ്എസ് ഉപയോഗിച്ച് ആനിമേഷനിൽ പൂർണ്ണ നിയന്ത്രണം നൽകുന്നു, ഇത് ഒരുകാലത്ത് സങ്കീർണ്ണമായ ജാവാസ്ക്രിപ്റ്റ് ജോലിയായിരുന്നത് ഒരു ഡിക്ലറേറ്റീവും ആക്‌സസ് ചെയ്യാവുന്നതുമായ സ്റ്റൈലിംഗ് വെല്ലുവിളിയാക്കി മാറ്റുന്നു.

എന്തുകൊണ്ടാണ് ഇത് വെബ് ഡെവലപ്‌മെന്റിൽ ഒരു ഗെയിം-ചേഞ്ചർ ആകുന്നത്

ഈ എപിഐയുടെ ആമുഖം കേവലം ഒരു ചെറിയ അപ്‌ഡേറ്റ് മാത്രമല്ല; ഇത് വെബ് പ്ലാറ്റ്‌ഫോമിന് അടിസ്ഥാനപരമായ ഒരു മെച്ചപ്പെടുത്തലിനെ പ്രതിനിധീകരിക്കുന്നു. ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്കും ഉപയോക്താക്കൾക്കും ഇത് വളരെ പ്രാധാന്യമർഹിക്കുന്നത് എന്തുകൊണ്ടാണെന്ന് താഴെ നൽകുന്നു:

• ഗണ്യമായി മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം (UX): സുഗമമായ സംക്രമണങ്ങൾ കേവലം സൗന്ദര്യവർദ്ധകമല്ല. അവ ദൃശ്യപരമായ തുടർച്ച നൽകുന്നു, വ്യത്യസ്ത കാഴ്‌ചകൾ തമ്മിലുള്ള ബന്ധം മനസ്സിലാക്കാൻ ഉപയോക്താക്കളെ സഹായിക്കുന്നു. ഒരു ലഘുചിത്രത്തിൽ നിന്ന് ഒരു പൂർണ്ണ വലുപ്പത്തിലുള്ള ചിത്രത്തിലേക്ക് തടസ്സമില്ലാതെ വളരുന്ന ഒരു ഘടകം സന്ദർഭം നൽകുകയും ഉപയോക്താവിന്റെ ശ്രദ്ധയെ നയിക്കുകയും ചെയ്യുന്നു, ഇത് ഇന്റർഫേസിനെ കൂടുതൽ അവബോധജന്യവും പ്രതികരണശേഷിയുള്ളതുമാക്കി മാറ്റുന്നു.
• വളരെയധികം ലളിതമായ വികസനം: ഈ എപിഐക്ക് മുമ്പ്, സമാനമായ ഫലങ്ങൾ നേടുന്നതിന് വലിയ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറികളോ (ഫ്രേമർ മോഷൻ അല്ലെങ്കിൽ ജിഎസ്എപി പോലുള്ളവ) സങ്കീർണ്ണമായ സിഎസ്എസ്-ഇൻ-ജെഎസ് പരിഹാരങ്ങളോ ആവശ്യമായിരുന്നു. വ്യൂ ട്രാൻസിഷൻ എപിഐ ഈ സങ്കീർണ്ണതയെ ഒരു ലളിതമായ ഫംഗ്ഷൻ കോളും ഏതാനും വരി സിഎസ്എസും ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു, ഇത് മനോഹരമായ, ആപ്പ് പോലുള്ള അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നതിനുള്ള പ്രവേശന തടസ്സം കുറയ്ക്കുന്നു.
• മികച്ച പ്രകടനം: ആനിമേഷൻ ലോജിക്ക് ബ്രൗസറിന്റെ റെൻഡറിംഗ് എഞ്ചിനിലേക്ക് ഓഫ്‌ലോഡ് ചെയ്യുന്നതിലൂടെ, വ്യൂ ട്രാൻസിഷനുകൾക്ക് അവയുടെ ജാവാസ്ക്രിപ്റ്റ്-ഡ്രൈവൻ എതിരാളികളേക്കാൾ മികച്ച പ്രകടനവും ബാറ്ററി കാര്യക്ഷമതയും നൽകാൻ കഴിയും. സ്വമേധയാ ആവർത്തിക്കാൻ പ്രയാസമുള്ള രീതിയിൽ ബ്രൗസറിന് പ്രക്രിയ ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയും.
• എസ്പിഎ-എംപിഎ വിടവ് നികത്തുന്നു: ഒരുപക്ഷേ ഏറ്റവും ആവേശകരമായ വശം ക്രോസ്-ഡോക്യുമെന്റ് ട്രാൻസിഷനുകൾക്കുള്ള പിന്തുണയാണ്. ഇത് പരമ്പราഗത, സെർവർ-റെൻഡർ ചെയ്ത വെബ്‌സൈറ്റുകളെ (എംപിഎ) എസ്പിഎ-കൾക്ക് മാത്രം പരിഗണിച്ചിരുന്ന സുഗമമായ നാവിഗേഷൻ സ്വീകരിക്കാൻ അനുവദിക്കുന്നു. ബിസിനസ്സുകൾക്ക് ഇപ്പോൾ അവരുടെ നിലവിലുള്ള വെബ്‌സൈറ്റുകളെ ഒരു പൂർണ്ണ എസ്പിഎ ഫ്രെയിംവർക്കിലേക്ക് ചെലവേറിയതും സങ്കീർണ്ണവുമായ ഒരു ആർക്കിടെക്ചറൽ മൈഗ്രേഷൻ നടത്താതെ തന്നെ ആധുനിക യുഎക്സ് പാറ്റേണുകൾ ഉപയോഗിച്ച് മെച്ചപ്പെടുത്താൻ കഴിയും.

പ്രധാന ആശയങ്ങൾ: വ്യൂ ട്രാൻസിഷനുകൾക്ക് പിന്നിലെ മാന്ത്രികത മനസ്സിലാക്കുന്നു

എപിഐയിൽ പ്രാവീണ്യം നേടുന്നതിന്, നിങ്ങൾ ആദ്യം അതിന്റെ രണ്ട് പ്രധാന ഘടകങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട്: ജാവാസ്ക്രിപ്റ്റ് ട്രിഗറും കസ്റ്റമൈസേഷൻ സാധ്യമാക്കുന്ന സിഎസ്എസ് സ്യൂഡോ-എലമെന്റ് ട്രീയും.

ജാവാസ്ക്രിപ്റ്റ് എൻട്രി പോയിന്റ്: `document.startViewTransition()`

എല്ലാം ഒരൊറ്റ ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷനിൽ നിന്നാണ് ആരംഭിക്കുന്നത്: `document.startViewTransition()`. ഈ ഫംഗ്ഷൻ ഒരു കോൾബാക്ക് ഒരു ആർഗ്യുമെന്റായി എടുക്കുന്നു. ഈ കോൾബാക്കിനുള്ളിൽ, പഴയ അവസ്ഥയിൽ നിന്ന് പുതിയ അവസ്ഥയിലേക്ക് മാറാൻ ആവശ്യമായ എല്ലാ ഡോം കൃത്രിമത്വങ്ങളും നിങ്ങൾ നടത്തുന്നു.

ഒരു സാധാരണ കോൾ ഇങ്ങനെ കാണപ്പെടുന്നു:

// ആദ്യം, ബ്രൗസർ എപിഐ പിന്തുണയ്ക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കുക
if (!document.startViewTransition) {
  // പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ, ഡോം നേരിട്ട് അപ്ഡേറ്റ് ചെയ്യുക
  updateTheDOM();
} else {
  // പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ, ഡോം അപ്ഡേറ്റ് ട്രാൻസിഷൻ ഫംഗ്ഷനിൽ പൊതിയുക
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

`startViewTransition` വിളിക്കുമ്പോൾ, ബ്രൗസർ മുമ്പ് വിവരിച്ച ക്യാപ്‌ചർ-അപ്‌ഡേറ്റ്-ആനിമേറ്റ് ക്രമം ആരംഭിക്കുന്നു. ഈ ഫംഗ്ഷൻ ഒരു `ViewTransition` ഒബ്ജക്റ്റ് നൽകുന്നു, അതിൽ കൂടുതൽ വിപുലമായ നിയന്ത്രണത്തിനായി ട്രാൻസിഷൻ ലൈഫ് സൈക്കിളിന്റെ വിവിധ ഘട്ടങ്ങളിലേക്ക് ഹുക്ക് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന പ്രോമിസുകൾ അടങ്ങിയിരിക്കുന്നു.

സിഎസ്എസ് സ്യൂഡോ-എലമെന്റ് ട്രീ

ഒരു സംക്രമണ സമയത്ത് ബ്രൗസർ സൃഷ്ടിക്കുന്ന ഒരു പ്രത്യേക കൂട്ടം സിഎസ്എസ് സ്യൂഡോ-എലമെന്റുകളിലാണ് കസ്റ്റമൈസേഷന്റെ യഥാർത്ഥ ശക്തി. ഈ താൽക്കാലിക ട്രീ പഴയതും പുതിയതുമായ കാഴ്‌ചകളെ സ്വതന്ത്രമായി സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

• ::view-transition: ട്രീയുടെ റൂട്ട്, മുഴുവൻ വ്യൂപോർട്ടും ഉൾക്കൊള്ളുന്നു. സംക്രമണത്തിന് ഒരു പശ്ചാത്തല നിറമോ ദൈർഘ്യമോ സജ്ജീകരിക്കാൻ നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കാം.
• ::view-transition-group(name): ഒരൊറ്റ സംക്രമണ ഘടകത്തെ പ്രതിനിധീകരിക്കുന്നു. ആനിമേഷൻ സമയത്ത് ഘടകത്തിന്റെ സ്ഥാനത്തിനും വലുപ്പത്തിനും ഇത് ഉത്തരവാദിയാണ്.
• ::view-transition-image-pair(name): ഒരു ഘടകത്തിന്റെ പഴയതും പുതിയതുമായ കാഴ്‌ചകൾക്കുള്ള ഒരു കണ്ടെയ്‌നർ. ഇത് ഒരു ഐസൊലേറ്റിംഗ് `mix-blend-mode` ആയി സ്റ്റൈൽ ചെയ്തിരിക്കുന്നു.
• ::view-transition-old(name): ഘടകത്തിന്റെ പഴയ അവസ്ഥയിലുള്ള സ്ക്രീൻഷോട്ട് (ഉദാഹരണത്തിന്, ലഘുചിത്രം).
• ::view-transition-new(name): ഘടകത്തിന്റെ പുതിയ അവസ്ഥയിലുള്ള ലൈവ് പ്രതിനിധീകരണം (ഉദാഹരണത്തിന്, പൂർണ്ണ വലുപ്പത്തിലുള്ള ചിത്രം).

സ്ഥിരസ്ഥിതിയായി, ഈ ട്രീയിലെ ഒരേയൊരു ഘടകം `root` ആണ്, ഇത് മുഴുവൻ പേജിനെയും പ്രതിനിധീകരിക്കുന്നു. സംസ്ഥാനങ്ങൾക്കിടയിൽ നിർദ്ദിഷ്ട ഘടകങ്ങൾ ആനിമേറ്റ് ചെയ്യുന്നതിന്, നിങ്ങൾ അവയ്ക്ക് സ്ഥിരമായ ഒരു `view-transition-name` നൽകണം.

പ്രായോഗിക നിർവ്വഹണം: നിങ്ങളുടെ ആദ്യ വ്യൂ ട്രാൻസിഷൻ (SPA ഉദാഹരണം)

നമുക്ക് ഒരു സാധാരണ യുഐ പാറ്റേൺ നിർമ്മിക്കാം: കാർഡുകളുടെ ഒരു ലിസ്റ്റ്, ക്ലിക്കുചെയ്യുമ്പോൾ ഒരേ പേജിലെ ഒരു വിശദമായ കാഴ്‌ചയിലേക്ക് മാറുന്നു. രണ്ട് അവസ്ഥകൾക്കിടയിൽ സുഗമമായി രൂപാന്തരപ്പെടുന്ന ഒരു ചിത്രം പോലുള്ള ഒരു പങ്കിട്ട ഘടകം ഉണ്ടായിരിക്കുക എന്നതാണ് പ്രധാനം.

ഘട്ടം 1: എച്ച്ടിഎംഎൽ ഘടന

നമ്മുടെ ലിസ്റ്റിനായി ഒരു കണ്ടെയ്‌നറും വിശദാംശ കാഴ്‌ചയ്‌ക്കായി ഒരു കണ്ടെയ്‌നറും ആവശ്യമാണ്. ഒന്ന് കാണിക്കാനും മറ്റൊന്ന് മറയ്ക്കാനും നമ്മൾ ഒരു പാരന്റ് എലമെന്റിൽ ഒരു ക്ലാസ് ടോഗിൾ ചെയ്യും.

<div id="app-container">
  <div class="list-view">
    <!-- കാർഡ് 1 -->
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="ഇനം 1">
      <h3>ഉൽപ്പന്നം ഒന്ന്</h3>
    </div>
    <!-- കൂടുതൽ കാർഡുകൾ... -->
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="ഇനം 1">
    <h1>ഉൽപ്പന്നം ഒന്ന്</h1>
    <p>വിശദമായ വിവരണം ഇവിടെ...</p>
    <button id="back-button">പുറകോട്ട്</button>
  </div>
</div>

ഘട്ടം 2: ഒരു `view-transition-name` നൽകുക

ലഘുചിത്രവും വിശദാംശ കാഴ്‌ച ചിത്രവും ഒരേ *ആശയപരമായ ഘടകം* ആണെന്ന് ബ്രൗസറിന് മനസ്സിലാക്കാൻ, നമ്മുടെ സിഎസ്എസിൽ അവയ്ക്ക് ഒരേ `view-transition-name` നൽകണം. ഈ പേര് പേജിലെ ഓരോ സംക്രമണ ഘടകത്തിനും ഒരു നിശ്ചിത സമയത്ത് അദ്വിതീയമായിരിക്കണം.

.card.active img {
  view-transition-name: product-image;
} .detail-view.active img {
  view-transition-name: product-image;
}

ദൃശ്യമായ ഘടകങ്ങൾക്ക് മാത്രം പേര് നൽകിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ നമ്മൾ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ചേർക്കുന്ന `.active` എന്ന ക്ലാസ് ഉപയോഗിക്കുന്നു, ഇത് വൈരുദ്ധ്യങ്ങൾ ഒഴിവാക്കുന്നു.

ഘട്ടം 3: ജാവാസ്ക്രിപ്റ്റ് ലോജിക്

ഇപ്പോൾ, ഡോം അപ്‌ഡേറ്റ് കൈകാര്യം ചെയ്യുന്ന ഫംഗ്ഷൻ എഴുതുകയും അത് `document.startViewTransition()`-ൽ പൊതിയുകയും ചെയ്യും.

function showDetailView(itemId) {
  const updateDOM = () => {
    // ശരിയായ കാർഡിലും വിശദാംശ കാഴ്‌ചയിലും 'active' ക്ലാസ് ചേർക്കുക
    // ഇത് സിഎസ്എസ് വഴി view-transition-name-ഉം നൽകുന്നു
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // ലിസ്റ്റ് മറച്ച് വിശദാംശ കാഴ്‌ച കാണിക്കുക
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

ഇത്രമാത്രം, ഒരു കാർഡിൽ ക്ലിക്കുചെയ്യുന്നത് ചിത്രത്തിന് സുഗമവും രൂപാന്തരപ്പെടുന്നതുമായ ഒരു ആനിമേഷനും പേജിന്റെ ബാക്കി ഭാഗങ്ങൾക്ക് ഒരു ക്രോസ്-ഫേഡും നൽകും. സങ്കീർണ്ണമായ ആനിമേഷൻ ടൈംലൈനോ ലൈബ്രറിയോ ആവശ്യമില്ല.

അടുത്ത ഘട്ടം: എംപിഎ-കൾക്കുള്ള ക്രോസ്-ഡോക്യുമെന്റ് വ്യൂ ട്രാൻസിഷനുകൾ

ഇവിടെയാണ് എപിഐ യഥാർത്ഥത്തിൽ പരിവർത്തനാത്മകമാകുന്നത്. പരമ്പരാഗത മൾട്ടി-പേജ് ആപ്ലിക്കേഷനുകളിൽ (എംപിഎ) ഈ സുഗമമായ സംക്രമണങ്ങൾ പ്രയോഗിക്കുന്നത് മുമ്പ് അവയെ എസ്പിഎ ആക്കാതെ അസാധ്യമായിരുന്നു. ഇപ്പോൾ, ഇത് ഒരു ലളിതമായ ഓപ്റ്റ്-ഇൻ ആണ്.

ക്രോസ്-ഡോക്യുമെന്റ് ട്രാൻസിഷനുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നു

വിവിധ പേജുകൾക്കിടയിലുള്ള നാവിഗേഷനുകൾക്കായി സംക്രമണങ്ങൾ പ്രവർത്തനക്ഷമമാക്കാൻ, നിങ്ങൾ ഉറവിട, ലക്ഷ്യസ്ഥാന പേജുകളുടെ സിഎസ്എസിലേക്ക് ഒരു ലളിതമായ സിഎസ്എസ് അറ്റ്-റൂൾ ചേർക്കുക:

@view-transition {
  navigation: auto;
}

അത്രയേയുള്ളൂ. ഈ നിയമം നിലവിലുണ്ടെങ്കിൽ, എല്ലാ ഒരേ-ഉറവിട നാവിഗേഷനുകൾക്കും ബ്രൗസർ സ്വയമേവ ഒരു വ്യൂ ട്രാൻസിഷൻ (സ്ഥിരസ്ഥിതി ക്രോസ്-ഫേഡ്) ഉപയോഗിക്കും.

പ്രധാന കാര്യം: സ്ഥിരമായ ഒരു `view-transition-name`

എസ്പിഎ ഉദാഹരണത്തിലെന്നപോലെ, രണ്ട് വ്യത്യസ്ത പേജുകളിലുടനീളമുള്ള ഘടകങ്ങളെ ബന്ധിപ്പിക്കുന്നതിന്റെ മാന്ത്രികത ഒരു പങ്കിട്ട, അദ്വിതീയമായ `view-transition-name`-നെ ആശ്രയിച്ചിരിക്കുന്നു. ഒരു ഉൽപ്പന്ന ലിസ്റ്റ് പേജും (`/products`) ഒരു ഉൽപ്പന്ന വിശദാംശ പേജും (`/products/item-1`) നമുക്ക് സങ്കൽപ്പിക്കാം.

`products.html`-ൽ:

<a href="/products/item-1">
  <img src="thumbnail-1.jpg" style="view-transition-name: product-image-1;">
</a>

`product-detail.html`-ൽ:

<div class="hero">
  <img src="large-1.jpg" style="view-transition-name: product-image-1;">
</div>

ഒരു ഉപയോക്താവ് ആദ്യ പേജിലെ ലിങ്കിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, `view-transition-name: product-image-1` ഉള്ള ഒരു ഘടകം പേജ് വിട്ടുപോകുന്നത് ബ്രൗസർ കാണുന്നു. തുടർന്ന് പുതിയ പേജ് ലോഡുചെയ്യുന്നതിനായി അത് കാത്തിരിക്കുന്നു. രണ്ടാമത്തെ പേജ് റെൻഡർ ചെയ്യുമ്പോൾ, അത് അതേ `view-transition-name` ഉള്ള ഒരു ഘടകം കണ്ടെത്തുകയും അവ രണ്ടും തമ്മിൽ സുഗമമായ ഒരു രൂപാന്തര ആനിമേഷൻ സ്വയമേവ സൃഷ്ടിക്കുകയും ചെയ്യുന്നു. പേജിലെ ബാക്കിയുള്ള ഉള്ളടക്കം ഒരു സൂക്ഷ്മമായ ക്രോസ്-ഫേഡിലേക്ക് മാറുന്നു. ഇത് എംപിഎ-കൾക്ക് മുമ്പ് ചിന്തിക്കാൻ പോലും കഴിയാത്ത വേഗതയും തുടർച്ചയും നൽകുന്നു.

വിപുലമായ സാങ്കേതിക വിദ്യകളും കസ്റ്റമൈസേഷനുകളും

സ്ഥിരസ്ഥിതി ക്രോസ്-ഫേഡ് മനോഹരമാണ്, എന്നാൽ എപിഐ സിഎസ്എസ് ആനിമേഷനുകളിലൂടെ ആഴത്തിലുള്ള കസ്റ്റമൈസേഷൻ ഹുക്കുകൾ നൽകുന്നു.

സിഎസ്എസ് ഉപയോഗിച്ച് ആനിമേഷനുകൾ കസ്റ്റമൈസ് ചെയ്യുന്നു

സാധാരണ സിഎസ്എസ് `@keyframes`, `animation` പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് സ്യൂഡോ-എലമെന്റുകളെ ടാർഗെറ്റുചെയ്‌ത് നിങ്ങൾക്ക് സ്ഥിരസ്ഥിതി ആനിമേഷനുകൾ പുനർനിർവചിക്കാൻ കഴിയും.

ഉദാഹരണത്തിന്, പുതിയ പേജ് ഉള്ളടക്കത്തിനായി "വലതുവശത്ത് നിന്ന് സ്ലൈഡ്-ഇൻ" പ്രഭാവം സൃഷ്ടിക്കാൻ:

@keyframes slide-from-right {
  from { transform: translateX(100%); }
} ::view-transition-new(root) {
  animation: slide-from-right 0.5s ease-out;
}

വളരെ ചിട്ടപ്പെടുത്തിയതും സങ്കീർണ്ണവുമായ സംക്രമണങ്ങൾ സൃഷ്ടിക്കുന്നതിന് നിങ്ങൾക്ക് `::view-transition-old`, `::view-transition-new` എന്നിവയ്ക്ക് വ്യത്യസ്ത ഘടകങ്ങൾക്കായി പ്രത്യേക ആനിമേഷനുകൾ പ്രയോഗിക്കാൻ കഴിയും.

ക്ലാസുകൾ ഉപയോഗിച്ച് സംക്രമണ തരങ്ങൾ നിയന്ത്രിക്കുന്നു

മുന്നോട്ടും പിന്നോട്ടുമുള്ള നാവിഗേഷനായി വ്യത്യസ്ത ആനിമേഷനുകൾ ഉണ്ടായിരിക്കുക എന്നത് ഒരു സാധാരണ ആവശ്യകതയാണ്. ഉദാഹരണത്തിന്, ഒരു ഫോർവേഡ് നാവിഗേഷൻ പുതിയ പേജിനെ വലതുവശത്ത് നിന്ന് സ്ലൈഡ് ചെയ്തേക്കാം, അതേസമയം ഒരു ബാക്ക് നാവിഗേഷൻ അതിനെ ഇടതുവശത്ത് നിന്ന് സ്ലൈഡ് ചെയ്തേക്കാം. സംക്രമണം ട്രിഗർ ചെയ്യുന്നതിന് തൊട്ടുമുമ്പ് ഡോക്യുമെന്റ് എലമെന്റിലേക്ക് (``) ഒരു ക്ലാസ് ചേർത്തുകൊണ്ട് ഇത് നേടാനാകും.

ഒരു 'ബാക്ക്' ബട്ടണിനായുള്ള ജാവാസ്ക്രിപ്റ്റ്:

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // തിരികെ നാവിഗേറ്റ് ചെയ്യാനുള്ള ലോജിക്
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

വ്യത്യസ്ത ആനിമേഷനുകൾ നിർവചിക്കാൻ സിഎസ്എസ്:

/* സ്ഥിരസ്ഥിതി ഫോർവേഡ് ആനിമേഷൻ */
::view-transition-new(root) {
  animation: slide-from-right 0.5s;
} /* ബാക്ക് ആനിമേഷൻ */
.is-going-back::view-transition-new(root) {
  animation: slide-from-left 0.5s;
}

ഈ ശക്തമായ പാറ്റേൺ ഉപയോക്താവിന്റെ നാവിഗേഷൻ അനുഭവത്തിൽ സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നു.

പ്രവേശനക്ഷമത പരിഗണനകൾ

ശക്തമായ പ്രവേശനക്ഷമതയില്ലാതെ ഒരു ആധുനിക വെബ് എപിഐ പൂർണ്ണമാകില്ല, വ്യൂ ട്രാൻസിഷൻ എപിഐ അത് നൽകുന്നു.

• ഉപയോക്തൃ മുൻഗണനകളെ മാനിക്കുന്നു: എപിഐ സ്വയമേവ `prefers-reduced-motion` മീഡിയ ക്വറിയെ മാനിക്കുന്നു. ഒരു ഉപയോക്താവ് അവരുടെ ഓപ്പറേറ്റിംഗ് സിസ്റ്റം ക്രമീകരണങ്ങളിൽ കുറഞ്ഞ ചലനം ഇഷ്ടപ്പെടുന്നുവെന്ന് സൂചിപ്പിച്ചിട്ടുണ്ടെങ്കിൽ, സംക്രമണം ഒഴിവാക്കുകയും ഡോം അപ്‌ഡേറ്റ് തൽക്ഷണം സംഭവിക്കുകയും ചെയ്യുന്നു. ഡെവലപ്പറിൽ നിന്ന് അധിക ജോലിയൊന്നും ആവശ്യമില്ലാതെ ഇത് സ്ഥിരസ്ഥിതിയായി സംഭവിക്കുന്നു.
• ഫോക്കസ് നിലനിർത്തുന്നു: സംക്രമണങ്ങൾ പൂർണ്ണമായും ദൃശ്യപരമാണ്. അവ സാധാരണ ഫോക്കസ് മാനേജ്മെന്റിൽ ഇടപെടുന്നില്ല. ഒരു സംക്രമണത്തിനുശേഷം, കീബോർഡ് ഫോക്കസ് പുതിയ കാഴ്‌ചയിലെ ഒരു ലോജിക്കൽ ഘടകത്തിലേക്ക്, പ്രധാന തലക്കെട്ടിലേക്കോ ആദ്യത്തെ സംവേദനാത്മക ഘടകത്തിലേക്കോ മാറ്റുന്നുവെന്ന് ഉറപ്പാക്കേണ്ടത് ഡെവലപ്പറുടെ ഉത്തരവാദിത്തമായി തുടരുന്നു.
• സെമാന്റിക് എച്ച്ടിഎംഎൽ: എപിഐ ഒരു മെച്ചപ്പെടുത്തൽ പാളിയാണ്. നിങ്ങളുടെ അടിസ്ഥാന എച്ച്ടിഎംഎൽ സെമാന്റിക്കും ആക്‌സസ് ചെയ്യാവുന്നതുമായിരിക്കണം. ഒരു സ്ക്രീൻ റീഡർ അല്ലെങ്കിൽ പിന്തുണയ്ക്കാത്ത ബ്രൗസർ ഉള്ള ഒരു ഉപയോക്താവിന് സംക്രമണമില്ലാതെ ഉള്ളടക്കം അനുഭവപ്പെടും, അതിനാൽ ഘടന സ്വയം അർത്ഥവത്താകണം.

ബ്രൗസർ പിന്തുണയും പ്രോഗ്രസ്സീവ് എൻഹാൻസ്മെന്റും

2023 അവസാനത്തോടെ, എസ്പിഎ-കൾക്കുള്ള വ്യൂ ട്രാൻസിഷൻ എപിഐ ക്രോമിയം അധിഷ്ഠിത ബ്രൗസറുകളിൽ (ക്രോം, എഡ്ജ്, ഓപ്പറ) പിന്തുണയ്ക്കുന്നു. എംപിഎ-കൾക്കായുള്ള ക്രോസ്-ഡോക്യുമെന്റ് ട്രാൻസിഷനുകൾ ഒരു ഫീച്ചർ ഫ്ലാഗിന് പിന്നിൽ ലഭ്യമാണ്, അവ സജീവമായി വികസിപ്പിച്ചുകൊണ്ടിരിക്കുന്നു.

ഈ എപിഐ പ്രോഗ്രസ്സീവ് എൻഹാൻസ്മെന്റിനായി തുടക്കം മുതൽ രൂപകൽപ്പന ചെയ്തതാണ്. നമ്മൾ നേരത്തെ ഉപയോഗിച്ച ഗാർഡ് പാറ്റേൺ പ്രധാനമാണ്:

if (!document.startViewTransition) { ... }

ഈ ലളിതമായ പരിശോധന, നിങ്ങളുടെ കോഡ് അത് പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകളിൽ മാത്രം ഒരു സംക്രമണം സൃഷ്ടിക്കാൻ ശ്രമിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. പഴയ ബ്രൗസറുകളിൽ, ഡോം അപ്‌ഡേറ്റ് എപ്പോഴും എന്നപോലെ തൽക്ഷണം സംഭവിക്കുന്നു. ഇതിനർത്ഥം, ആധുനിക ബ്രൗസറുകളിലെ ഉപയോക്താക്കൾക്ക് അനുഭവം മെച്ചപ്പെടുത്തുന്നതിന് നിങ്ങൾക്ക് ഇന്ന് തന്നെ എപിഐ ഉപയോഗിക്കാൻ തുടങ്ങാം, പഴയവയുള്ളവർക്ക് ഒരു ദോഷവും ഉണ്ടാകില്ല. ഇതൊരു വിൻ-വിൻ സാഹചര്യമാണ്.

വെബ് നാവിഗേഷന്റെ ഭാവി

വ്യൂ ട്രാൻസിഷൻ എപിഐ കണ്ണഞ്ചിപ്പിക്കുന്ന ആനിമേഷനുകൾക്കുള്ള ഒരു ഉപകരണം എന്നതിലുപരിയാണ്. കൂടുതൽ അവബോധജന്യവും യോജിപ്പുള്ളതും ആകർഷകവുമായ ഉപയോക്തൃ യാത്രകൾ രൂപകൽപ്പന ചെയ്യാൻ ഡെവലപ്പർമാരെ ശാക്തീകരിക്കുന്ന ഒരു അടിസ്ഥാനപരമായ മാറ്റമാണിത്. പേജ് സംക്രമണങ്ങൾ സ്റ്റാൻഡേർഡ് ചെയ്യുന്നതിലൂടെ, വെബ് പ്ലാറ്റ്ഫോം നേറ്റീവ് ആപ്ലിക്കേഷനുകളുമായുള്ള വിടവ് നികത്തുന്നു, എല്ലാത്തരം വെബ്സൈറ്റുകൾക്കും ഒരു പുതിയ തലത്തിലുള്ള ഗുണനിലവാരവും മിനുക്കും സാധ്യമാക്കുന്നു.

ബ്രൗസർ പിന്തുണ വികസിക്കുമ്പോൾ, വെബ് ഡിസൈനിൽ ഒരു പുതിയ സർഗ്ഗാത്മകതയുടെ തരംഗം നമുക്ക് പ്രതീക്ഷിക്കാം, അവിടെ പേജുകൾക്കിടയിലുള്ള യാത്ര പേജുകളെപ്പോലെ തന്നെ ചിന്താപൂർവ്വം രൂപകൽപ്പന ചെയ്യപ്പെടും. എസ്പിഎ-കളും എംപിഎ-കളും തമ്മിലുള്ള അതിരുകൾ മങ്ങുന്നത് തുടരും, ഇത് ടീമുകളെ ഉപയോക്തൃ അനുഭവം ബലികഴിക്കാതെ അവരുടെ പ്രോജക്റ്റിന് മികച്ച ആർക്കിടെക്ചർ തിരഞ്ഞെടുക്കാൻ അനുവദിക്കുന്നു.

ഉപസംഹാരം: ഇന്നുതന്നെ സുഗമമായ അനുഭവങ്ങൾ നിർമ്മിക്കാൻ ആരംഭിക്കുക

സിഎസ്എസ് വ്യൂ ട്രാൻസിഷൻ എപിഐ ശക്തമായ കഴിവുകളുടെയും ശ്രദ്ധേയമായ ലാളിത്യത്തിന്റെയും അപൂർവ സംയോജനം വാഗ്ദാനം ചെയ്യുന്നു. നിങ്ങളുടെ സൈറ്റിന്റെ ഉപയോക്തൃ അനുഭവം പ്രവർത്തനക്ഷമതയിൽ നിന്ന് ആനന്ദകരമാക്കി ഉയർത്തുന്നതിന് ഇത് പ്രകടനക്ഷമവും ആക്‌സസ് ചെയ്യാവുന്നതും പുരോഗമനപരമായി മെച്ചപ്പെടുത്തിയതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു.

നിങ്ങൾ ഒരു സങ്കീർണ്ണമായ എസ്പിഎ അല്ലെങ്കിൽ ഒരു പരമ്പราഗത സെർവർ-റെൻഡർ ചെയ്ത വെബ്സൈറ്റ് നിർമ്മിക്കുകയാണെങ്കിലും, അസുഖകരമായ പേജ് ലോഡുകൾ ഒഴിവാക്കാനും നിങ്ങളുടെ ഉപയോക്താക്കളെ നിങ്ങളുടെ ഇന്റർഫേസിലൂടെ സുഗമവും അർത്ഥവത്തായതുമായ ആനിമേഷനുകളിലൂടെ നയിക്കാനും ഉള്ള ഉപകരണങ്ങൾ ഇപ്പോൾ ലഭ്യമാണ്. അതിന്റെ ശക്തി മനസ്സിലാക്കാനുള്ള ഏറ്റവും നല്ല മാർഗം അത് പരീക്ഷിക്കുക എന്നതാണ്. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഒരു ചെറിയ ഭാഗം എടുക്കുക—ഒരു ഗാലറി, ഒരു ക്രമീകരണ പേജ്, അല്ലെങ്കിൽ ഒരു ഉൽപ്പന്ന ഫ്ലോ—എന്നിട്ട് പരീക്ഷിക്കുക. ഏതാനും വരി കോഡിന് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ അനുഭവം അടിസ്ഥാനപരമായി എങ്ങനെ മാറ്റാൻ കഴിയുമെന്ന് നിങ്ങൾ അത്ഭുതപ്പെടും.

വെളുത്ത മിന്നലിന്റെ യുഗം അവസാനിക്കുകയാണ്. വെബ് നാവിഗേഷന്റെ ഭാവി തടസ്സമില്ലാത്തതാണ്, വ്യൂ ട്രാൻസിഷൻ എപിഐ ഉപയോഗിച്ച്, അത് ഇന്നുതന്നെ നിർമ്മിക്കാൻ തുടങ്ങാൻ ആവശ്യമായതെല്ലാം നിങ്ങളുടെ പക്കലുണ്ട്.