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

Bramus

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

साथ ही, हमने कुछ सुधार शेयर किए हैं, जिनकी मदद से आम तौर पर व्यू ट्रांज़िशन के साथ काम करना ज़्यादा आसान हो जाता है.

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

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

MPA के लिए क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन

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

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

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

डेमो

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

यह MPA फ़ॉर्मैट, क्रॉस-दस्तावेज़ नेविगेशन वाला है और इसे उसी ऑरिजिन पर होस्ट किया गया है. 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;
  }
});

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

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

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

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

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

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 की गड़बड़ी की शिकायत करें.