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

Bramus

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

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

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

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

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 126.
  • Edge: 126.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari Technology Preview: काम करता है.

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

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

Airbnb पर दिखने वाले दस्तावेज़ के व्यू का ट्रांज़िशन.

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

से चालू किया जा सकता है.

डेमो

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

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

यह एक एमपीए है, जिसमें एक ही ऑरिजिन पर होस्ट किए गए क्रॉस-दस्तावेज़ नेविगेशन हैं. 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 के साथ ऐनिमेशन स्टाइल शेयर करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 125.
  • Edge: 125.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: 18.2.

अब तक, एक ही तरह से कई स्नैपशॉट को ऐनिमेट करते समय, आपको हर स्नैपशॉट को अलग-अलग टारगेट करना पड़ता था. इसके लिए, आपको हर उस एलिमेंट के लिए उसका सूडो-सिलेक्टर दोहराना पड़ता था जिसमें यूनीक 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 का इस्तेमाल करके, जोड़े गए या हटाए गए कार्ड को छोड़कर, सभी कार्ड पर एक ही animation-timing-function लागू होता है.

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 125.
  • Edge: 125.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: 18.

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

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

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

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

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

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

const direction = determineBackwardsOrForwards();

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

क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन के लिए, types डिस्क्रिप्टर का इस्तेमाल करके @view-transition at-rule में टाइप सेट करें या उन्हें 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 में गड़बड़ी की शिकायत करें.