व्यू ट्रांज़िशन में नया क्या है? (Google I/O 2024 अपडेट)

Bramus

पब्लिश किए जाने की तारीख: 16 मई, 2024

Google I/O 2024 में, मैंने व्यू ट्रांज़िशन के लिए अगले चरण का एलान किया था: मल्टी-पेज ऐप्लिकेशन (एमपीए) के लिए, क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन.

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

• view-transition-class की मदद से, व्यू ट्रांज़िशन के सूडो-एलिमेंट के बीच ऐनिमेशन स्टाइल शेयर करना.
• ऐक्टिव टाइप वाले चुनिंदा व्यू के ट्रांज़िशन.

ये सुधार, एक पेज वाले ऐप्लिकेशन (एसपीए) के लिए, एक जैसे दस्तावेज़ वाले व्यू ट्रांज़िशन और एमपीए के लिए क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन, दोनों पर लागू होते हैं.

एमपीए के लिए, एक दस्तावेज़ से दूसरे दस्तावेज़ पर व्यू ट्रांज़िशन

Chrome 111 में, Chrome की टीम ने एक पेज वाले ऐप्लिकेशन के लिए, एक ही दस्तावेज़ के व्यू ट्रांज़िशन की सुविधा लॉन्च की थी. यह सुविधा, वेब बिल्डिंग कम्यूनिटी में काफ़ी लोकप्रिय हुई.

हमें यह देखकर खुशी हो रही है कि आपमें से कई लोगों ने व्यू ट्रांज़िशन की मदद से क्या-क्या बनाया है. इन चीज़ों में, आम तौर पर किए जाने वाले इस्तेमाल से लेकर, "थंबनेल को बड़ी फ़ोटो के तौर पर बड़ा करो" से लेकर, पसंद के मुताबिक बनाया गया शानदार अनुभव शामिल है. जैसे, Airbnb की तरह यह वीडियो. शानदार!

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

क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन चालू करने के लिए, दोनों सिरों को ऑप्ट-इन करना होगा. ऐसा करने के लिए, @view-transition at-rule का इस्तेमाल करें और navigation डिस्क्रिप्टर को auto पर सेट करें.

@view-transition {
  navigation: auto;
}

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

अलग-अलग दस्तावेज़ों के व्यू ट्रांज़िशन को पसंद के मुताबिक बनाने के लिए, pageswap और pagereveal इवेंट का इस्तेमाल करें. इनसे आपको व्यू ट्रांज़िशन ऑब्जेक्ट का ऐक्सेस मिलता है.

• pageswap की मदद से, पुराने स्नैपशॉट लेने से ठीक पहले, आउटगोइंग पेज पर आखिरी समय में कुछ बदलाव किए जा सकते हैं.
• pagereveal का इस्तेमाल करके, नए पेज को शुरू होने के बाद रेंडर होने से पहले पसंद के मुताबिक बनाया जा सकता है.

दोनों इवेंट में, आपके पास NavigationActivation ऑब्जेक्ट का ऐक्सेस होता है. इसकी मदद से, पुराने और नए डेस्टिनेशन इतिहास की एंट्री या नेविगेशन टाइप के आधार पर, क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन को पसंद के मुताबिक बनाया जा सकता है.

इसे बंद करने के लिए, रेंडर ब्लॉक करने की सुविधा की मदद से कॉन्टेंट लोड होने का इंतज़ार करें. साथ ही, व्यू ट्रांज़िशन के चालू होने से पहले, प्रीरेंडरिंग की प्रोसेस पर भरोसा करें, ताकि कॉन्टेंट लोड होने में लगने वाला समय कम हो सके.

डेमो

स्टैक नेविगेटर के इस डेमो में, इन सभी सुविधाओं के साथ-साथ कुछ सुधार भी शामिल हैं.

यह एक एमपीए है, जिसमें एक ही ऑरिजिन पर होस्ट किए गए क्रॉस-दस्तावेज़ नेविगेशन हैं. pagereveal का इस्तेमाल करके, डेस्टिनेशन के इतिहास की पुरानी और नई एंट्री के आधार पर ऐनिमेशन का टाइप तय किया जाता है.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

दस्तावेज़ पढ़ें

क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन को चालू करने और उसे पसंद के मुताबिक बनाने के तरीके के बारे में ज़्यादा जानकारी के लिए, क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन से जुड़ा हमारा दस्तावेज़ देखें.

ट्रांज़िशन में हुए सुधार देखना

एमपीए के लिए, एक दस्तावेज़ से दूसरे दस्तावेज़ में व्यू ट्रांज़िशन करने की सुविधा के अलावा, Chrome में व्यू ट्रांज़िशन के साथ काम करने के लिए कुछ बेहतर सुविधाएं भी शामिल की गई हैं.

ये सुधार, एसपीए के लिए एक जैसे दस्तावेज़ वाले व्यू ट्रांज़िशन और एमपीए के लिए क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन, दोनों पर लागू होते हैं.

view-transition-class के साथ ऐनिमेशन स्टाइल शेयर करना

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

view-transition-class की मदद से, अब सभी स्नैपशॉट में शेयर किया जाने वाला नाम जोड़ा जा सकता है. मैच होने वाले सभी स्नैपशॉट को टारगेट करने के लिए, सूडो सिलेक्टर में इस शेयर किए गए नाम का इस्तेमाल करें. इससे बहुत आसानी से सिलेक्टर बन जाते हैं, जो अपने-आप एक से कई एलिमेंट का साइज़ तय कर देते हैं.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

नीचे दिए गए कार्ड के उदाहरण में, एक सिलेक्टर का इस्तेमाल करके, कई स्नैपशॉट पर ऐनिमेशन का एक ही समय लागू करने के लिए, view-transition-class का इस्तेमाल किया गया है.

view-transition-class के बारे में ज़्यादा जानने के लिए, view-transition-class पर खास दस्तावेज़ पढ़ें.

ऐक्टिव टाइप के साथ चुनिंदा व्यू ट्रांज़िशन

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

उदाहरण के लिए, पेजेशन क्रम में अगले या पिछले पेज पर जाने पर, हो सकता है कि आप अलग-अलग ऐनिमेशन का इस्तेमाल करना चाहें. यह इस बात पर निर्भर करता है कि आपको क्रम में ऊपर वाले पेज पर जाना है या नीचे वाले पेज पर.

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

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

एक ही दस्तावेज़ के व्यू के ट्रांज़िशन के लिए, types को startViewTransition मैथड में पास करें. यह मैथड अब ऑब्जेक्ट स्वीकार करता है. update एक कॉलबैक फ़ंक्शन है जो डीओएम को अपडेट करता है और types, स्ट्रिंग का एक क्रम है.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन के लिए, types डिस्क्रिप्टर का इस्तेमाल करके @view-transition के नियम में टाइप सेट करें या pageswap और pagereveal इवेंट में उन्हें फ़्लाई पर सेट करें.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

टाइप सेट होने पर, व्यू ट्रांज़िशन रूट पर लागू होने वाले :active-view-transition-type() और :active-view-transition स्यूडो-क्लास सिलेक्टर का इस्तेमाल करके, अपनी सीएसएस में इन टाइप के हिसाब से कार्रवाई की जा सकती है.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

व्यू के ट्रांज़िशन टाइप के बारे में ज़्यादा जानने के लिए, एक जैसे दस्तावेज़ वाले व्यू के ट्रांज़िशन और क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन के लिए, खास तौर पर बने दस्तावेज़ देखें.

सुझाव/राय दें या शिकायत करें

डेवलपर के सुझाव, शिकायत या राय का हमेशा स्वागत है. ऐसा करने के लिए, GitHub पर सीएसएस वर्किंग ग्रुप के साथ समस्या दर्ज करें. इसमें सुझाव और सवाल शामिल करें. अपनी समस्या के आगे [css-view-transitions] जोड़ें.

अगर आपको कोई गड़बड़ी मिलती है, तो Chromium में गड़बड़ी की शिकायत करें.