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

Bramus

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

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

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

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

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

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

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

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

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

क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन की सुविधा चालू करने के लिए, दोनों एंड को ऑप्ट-इन करना होगा. इसके लिए, @view-transition ऐट-रूल का इस्तेमाल करें और 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, 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 के बारे में दिया गया दस्तावेज़ पढ़ें.

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

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

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

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

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

एक ही दस्तावेज़ के व्यू ट्रांज़िशन के लिए, 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 वर्किंग ग्रुप के साथ कोई समस्या दर्ज करें. इसमें अपने सुझाव और सवाल शामिल करें. अपनी समस्या के आगे [css-view-transitions] जोड़ें.

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