एक पेज वाले ऐप्लिकेशन के लिए व्यू ट्रांज़िशन

वेब पेजों के लिए, JavaScript का इस्तेमाल करके किसी पेज के कॉन्टेंट को डाइनैमिक तरीके से बदलने का तरीका आम है. इसमें, नए और पूरे एचटीएमएल दस्तावेज़ को लोड नहीं किया जाता. इसे सिंगल पेज ऐप्लिकेशन या एसपीए कहा जाता है. व्यू ट्रांज़िशन की मदद से, अपने एसपीए के पेजों के बीच कॉन्टेंट को लगातार दिखाया जा सकता है या कॉन्टेक्स्ट को बनाए रखा जा सकता है.

पूरे पेज के ट्रांज़िशन

जब आपका उपयोगकर्ता, आपके एसपीए में किसी नए व्यू पर जाता है, तो आपका फ़्रेमवर्क डीओएम को नए कॉन्टेंट से बदल देता है. इससे कॉन्टेंट सिर्फ़ दिखता है. हालांकि, अगर आपको मौजूदा कॉन्टेंट और नए कॉन्टेंट के बीच ट्रांज़िशन देना है, तो क्या करें?

ट्रांज़िशन में अक्सर पुराने और नए, दोनों व्यू एक साथ दिखते हैं. उदाहरण के लिए, पुराने व्यू को फ़ेड आउट करते समय नए व्यू को फ़ेड इन करना. मौजूदा कॉन्टेंट को बदलने की वजह से, व्यू ट्रांज़िशन से पहले यह एक चुनौती थी.

व्यू ट्रांज़िशन का इस्तेमाल करने के लिए, आपको DOM को बदलने के लॉजिक को कॉलबैक में रैप करना होगा. इन उदाहरणों के लिए, हमारे पास एक बुनियादी राऊटर है, जिसे MyRouter नाम के वेब कॉम्पोनेंट ने लागू किया है. व्यू ट्रांज़िशन की सुविधा चालू करने का तरीका, आपके इस्तेमाल किए जा रहे राऊटर और फ़्रेमवर्क पर निर्भर करेगा.

document.startViewTransition(() => updateTheDOMSomehow());

इससे डिफ़ॉल्ट ट्रांज़िशन चालू हो जाता है. इसमें पुराना व्यू फ़ेड आउट होता है और नया व्यू फ़ेड इन होता है.

यहां क्या हो रहा है? document.startViewTransition() को कॉल करने पर, ब्राउज़र पुराने व्यू का स्नैपशॉट लेता है. इसके बाद, यह उस कॉलबैक फ़ंक्शन को कॉल करता है जिसे आपने पास किया है. यह फ़ंक्शन, DOM को नई व्यू में अपडेट करता है. हालांकि, यह उसे अभी नहीं दिखाता है. कॉलबैक फ़ंक्शन पूरा होने पर, ब्राउज़र नए कॉन्टेंट पर ट्रांज़िशन शुरू करता है.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

ट्रांज़िशन को पसंद के मुताबिक बनाना

आपने पिछले उदाहरण में देखा कि डिफ़ॉल्ट व्यू ट्रांज़िशन, नए व्यू को फ़ेड इन करते समय पुराने व्यू को फ़ेड आउट करता है. व्यू ट्रांज़िशन से जनरेट हुए सूडो एलिमेंट को स्टाइल करके, ट्रांज़िशन को अपनी साइट की स्टाइल से बेहतर तरीके से मैच किया जा सकता है.

::view-transition-old() की मदद से, स्लाइड के बाहर जाने का ट्रांज़िशन और ::view-transition-new() की मदद से, स्लाइड के अंदर आने का ट्रांज़िशन तय किया जा सकता है. ::view-transition-group() एट्रिब्यूट का इस्तेमाल करके, दोनों के लिए वैल्यू भी दी जा सकती हैं.

इस उदाहरण में, पुराने व्यू को slide-out-to-left ट्रांज़िशन का इस्तेमाल करके हटाया जाएगा. वहीं, नए व्यू को slide-in-from-right ट्रांज़िशन का इस्तेमाल करके जोड़ा जाएगा. इन दोनों की अवधि 200 मिलीसेकंड होगी.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

कॉन्टेक्स्ट के आधार पर अलग-अलग ट्रांज़िशन

उपयोगकर्ता की गतिविधि के आधार पर, आपको अलग-अलग ट्रांज़िशन दिखाने पड़ सकते हैं. उदाहरण के लिए, अगर आपके होम पेज पर मौजूद किसी लिंक पर क्लिक करने से, नया व्यू दाईं ओर से स्लाइड होकर आता है, तो आपको उम्मीद होगी कि होम पेज पर वापस जाने के लिए किसी लिंक पर क्लिक करने से, होम व्यू बाईं ओर से स्लाइड होकर आएगा.

:active-view-transition-type() स्यूडो क्लास का इस्तेमाल करके, अलग-अलग ऐनिमेशन तय किए जा सकते हैं.

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

इसके बाद, document.startViewTransition() को कॉल करते समय, व्यू ट्रांज़िशन के किस टाइप का इस्तेमाल करना है, यह चुना जा सकता है.

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

चुनिंदा एलिमेंट में ट्रांज़िशन करना

अब तक, आपने पूरे व्यू को ट्रांज़िशन करने के लिए, सिर्फ़ रूट एलिमेंट पर ट्रांज़िशन लागू किया है. हालांकि, व्यू ट्रांज़िशन का इस्तेमाल करके, अपने पेजों के कुछ हिस्सों में ऐनिमेशन भी जोड़ा जा सकता है.

उदाहरण के लिए, ऐसा हो सकता है कि पुराने व्यू में मौजूद कॉन्टेंट, नए व्यू में मौजूद कॉन्टेंट से मेल खाता हो. यह कॉन्टेंट का टाइटल या कोई इमेज हो सकती है. ऐसा भी हो सकता है कि पुराने व्यू में थंबनेल इमेज दिखे और नए व्यू में वीडियो दिखे.

सबसे पहले, आपको view-transition-name प्रॉपर्टी का इस्तेमाल करके यह बताना होगा कि किन एलिमेंट को ट्रांज़िशन करना है. व्यू ट्रांज़िशन की सुविधा काम करे, इसके लिए हर view-transition-name में, document.startViewTransition() को कॉल करने से पहले सिर्फ़ एक एलिमेंट होना चाहिए. साथ ही, document.startViewTransition() में कॉलबैक पूरा होने के बाद सिर्फ़ एक एलिमेंट होना चाहिए.

इस उदाहरण में, एक म्यूज़िक प्लेयर दिखाया गया है. इसमें एल्बम आर्ट, टाइटल, और कलाकार का नाम दिखता है. ऑल्टरनेट व्यू में, कॉन्टेंट को फिर से व्यवस्थित करके दिखाया गया है. इसमें गाने के बोल भी शामिल किए गए हैं.

ऊपर दिए गए उदाहरण में, ट्रांज़िशन किए गए हर एलिमेंट का एक-एक वर्शन, पुराने और नए व्यू में मौजूद है. साथ ही, वे एक ही सिलेक्टर शेयर करते हैं. ट्रांज़िशन किए गए एलिमेंट, अपने साइज़ और पोज़िशन के बीच बदलते हुए दिखते हैं. व्यू के जिन हिस्सों में बदलाव नहीं किया गया है वे धीरे-धीरे दिखते और गायब होते हैं.

ज़्यादा जानकारी वाले उदाहरण पर एक नज़र डालें. उदाहरण के लिए, किसी ब्लॉग के होम पेज पर हर पोस्ट के लिए हेडलाइन और इमेज दिख सकती है. ये जानकारी, ब्लॉग पोस्ट के पूरे पेज व्यू पर भी मौजूद होती है. होम पेज से किसी पोस्ट पर जाते समय, आपको ऐसा दिखाना पड़ सकता है कि टाइटल और इमेज अपनी नई जगह पर ट्रांज़िशन कर रहे हैं, ताकि कॉन्टेक्स्ट दिया जा सके.

टाइटल के लिए ऐसा करने के लिए, आपके पास टाइटल एलिमेंट पर view-transition-name होना चाहिए. यह view-transition-name, पुराने व्यू में यूनीक हो, नए व्यू में टाइटल एलिमेंट के साथ शेयर किया गया हो, और नए व्यू में यूनीक हो. यह एक चुनौती है, क्योंकि होम पेज पर कई हेडलाइन और इमेज होती हैं. आपको यह नहीं पता होता कि उपयोगकर्ता किस पर क्लिक करेगा.

इस समस्या को हल करने के लिए, आपके पास दो विकल्प हैं. होम पेज पर मौजूद हर पोस्ट के लिए, एक यूनीक view-transition-name जोड़ा जा सकता है. इसके बाद, हर फ़ुल पेज पोस्ट पर उस नाम से मैच किया जा सकता है. इन्हें पोस्ट के आईडी का इस्तेमाल करके जनरेट किया जा सकता है. आपके पास सामान्य view-transition-name का इस्तेमाल करने का विकल्प भी है. हालांकि, इसे सिर्फ़ तब लागू करें, जब उपयोगकर्ता किसी पोस्ट पर क्लिक करे, लेकिन document.startViewTransition() को कॉल करने से पहले.

ट्रांज़िशन डिज़ाइन करना

व्यू ट्रांज़िशन, टूल का एक सेट होता है. इसका इस्तेमाल करके, उपयोगकर्ताओं को दिशा-निर्देश दिए जा सकते हैं. साथ ही, ब्रैंड या कॉन्टेक्स्ट के बारे में अतिरिक्त जानकारी दी जा सकती है. अपनी साइट के लिए सबसे सही ट्रांज़िशन ढूंढने के लिए, आपको कई तकनीकों का इस्तेमाल करना पड़ सकता है.

आपको जिस तरह का इफ़ेक्ट चाहिए उसके हिसाब से, आपको एलिमेंट या ऐनिमेशन में बदलाव करने पड़ सकते हैं. पिछले उदाहरण में, ट्रांज़िशन को आसान बनाने के लिए कई स्टाइल में बदलाव किया गया था.

हेडलाइन में width: fit-content नियम है. यह ऐसी स्टाइल है जो तब काम आती है, जब आपको ऐसे टेक्स्ट को ट्रांज़िशन करना होता है जो रैप नहीं होता या जिसमें पुराने और नए व्यू, दोनों में एक जैसा रैपिंग होता है. ऐसा न करने पर, ट्रांज़िशन अलग-अलग चौड़ाई वाले एलिमेंट के बीच हो सकता है. इससे ट्रांज़िशन कम स्मूद होगा.

इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) भी पुराने और नए व्यू में अलग-अलग है. इस उदाहरण में, ऐनिमेशन और object-fit प्रॉपर्टी में बदलाव किया गया है, ताकि ट्रांज़िशन आसानी से हो सके.

prefers-reduced-motion का सम्मान करना

उपयोगकर्ता, मोशन कम करने का अनुरोध इसलिए करते हैं, क्योंकि फ़ुल-स्क्रीन ऐनिमेशन से वेस्टिबुलर मोशन डिसऑर्डर से पीड़ित लोगों को परेशानी हो सकती है. जैसे, व्यू ट्रांज़िशन की मदद से बनाए गए ऐनिमेशन. prefers-reduced-motion मीडिया क्वेरी का इस्तेमाल करके, ऐनिमेशन बंद किए जा सकते हैं. आपके पास ऐसे वैकल्पिक ऐनिमेशन उपलब्ध कराने का विकल्प भी है जो ज़्यादा बेहतर हों. हालांकि, इनसे यह पता चलना चाहिए कि एलिमेंट कैसे कनेक्ट किए गए हैं.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

देखें कि आपको कितना समझ आया