View Transition API की मदद से, एक ही चरण में DOM को अपडेट किया जा सकता है. साथ ही, दो स्टेटस के बीच ऐनिमेशन ट्रांज़िशन जनरेट किया जा सकता है.
डेवलपर, इस तरह के ट्रांज़िशन की सुविधा के लिए अक्सर अनुरोध करते थे. इनमें से कुछ डेवलपर में मैं भी शामिल था. हमें लगता है कि हमने इस सुविधा को इस तरह से लॉन्च किया है कि इसमें डिफ़ॉल्ट तौर पर मिलने वाली सुविधाओं के साथ-साथ, एक्सटेंसिबिलिटी और पसंद के मुताबिक बनाने की सुविधा भी मिलती है. ऐसा लगता है कि हम अपनी पीठ थपथपा रहे हैं, लेकिन इस सुविधा को डिज़ाइन करने के लिए, डेवलपर के सुझाव, शिकायत या राय अहम थी. इस सुविधा के पहले प्रोटोटाइप में, ज़्यादा विकल्प नहीं थे. साथ ही, जिन लोगों (जैसे, आप?) ने प्रोटोटाइप आज़माने और सुझाव देने में समय बिताया, उनके सुझावों के आधार पर इस सुविधा को पूरी तरह से फिर से तैयार किया गया. धन्यवाद!
इस सुविधा के बारे में जानने और कुछ डेमो आज़माने के लिए, हमारी गाइड देखें. अगर आपको लगता है कि इस लेख में कोई जानकारी मौजूद नहीं है, तो कृपया Twitter, Mastodon या ईमेल पर हमसे संपर्क करें.
फ़िलहाल, व्यू ट्रांज़िशन एपीआई सिर्फ़ Chrome में उपलब्ध है. हालांकि, इसका इस्तेमाल प्रगतिशील बेहतर बनाने के तौर पर किया जा सकता है. गाइड में एक हेल्पर फ़ंक्शन शामिल है. इसका इस्तेमाल सभी ब्राउज़र पर किया जा सकता है. हालांकि, सिर्फ़ उन ब्राउज़र पर ऐनिमेशन दिखेगा जो व्यू ट्रांज़िशन की सुविधा देते हैं.
हमने सीएसएस वर्किंग ग्रुप के साथ मिलकर यह सुविधा विकसित की है. इसमें, ब्राउज़र के अन्य वेंडर और स्वतंत्र लोगों के सुझावों का भी इस्तेमाल किया गया है. हमें नहीं पता कि दूसरे ब्राउज़र, व्यू ट्रांज़िशन को कब या कब तक अपनाएंगे. हालांकि, Mozilla के स्टैंडर्ड और WebKit के स्टैंडर्ड पर नज़र बनाए रखें.
हालांकि, हमने अभी तक 'पूरा' नहीं किया है!
Chrome 111 में यह सुविधा, सिर्फ़ पहली रिलीज़ है. हमें उम्मीद है कि हमें सभी गड़बड़ियां पहले ही मिल गई हैं. हालांकि, अगर आपको कोई समस्या मिलती है, तो कृपया crbug.com पर शिकायत करें. साथ ही, कम डेमो के साथ शिकायत करें. अगर आपको इस बारे में जानकारी नहीं है या आपको यह तरीका पसंद नहीं है, तो Twitter, Mastodon या ईमेल पर हमसे संपर्क करें. हम आपकी मदद करेंगे.
यह रिलीज़, बड़ी तस्वीर का एक छोटा हिस्सा है. हालांकि, हमें उम्मीद है कि यह आपके लिए मददगार साबित होगी. हमने इस सुविधा के लिए कुछ एक्सटेंशन पहले ही तैयार कर लिए हैं, ताकि यह पक्का किया जा सके कि आज शिप किए जा रहे पुर्ज़े, आने वाले समय में भी काम करते रहें.
यहां इस सुविधा के बारे में खास जानकारी दी गई है. ये सुविधाएं प्राथमिकता के क्रम में नहीं हैं. हालांकि, हो सकता है कि पहला विकल्प कई लोगों के लिए सबसे ज़्यादा अहम हो. इसलिए, हमें इस बारे में सुझाव या राय दें कि आपके लिए कौनसी सुविधाएं सबसे ज़्यादा अहम हैं.
एक से दूसरे दस्तावेज़ पर ट्रांज़िशन करना
हमें लगता है कि ज़्यादातर डेवलपर चाहते हैं कि हम इस सुविधा पर आगे काम करें. अच्छी बात यह है कि हम पहले से ही इस पर काम कर रहे हैं!
व्यू ट्रांज़िशन एपीआई को इस तरह डिज़ाइन किया गया है कि यह एक ही ऑरिजिन वाले दस्तावेज़ों पर काम कर सके. इसमें सिर्फ़ इतना फ़र्क़ है कि startViewTransition, DOM की स्थिति में बदलाव का सिग्नल देने के बजाय, नेविगेशन खुद ही उस बदलाव का सिग्नल देगा.
chrome://flags/#view-transition-on-navigation फ़्लैग के पीछे, इसका प्रोटोटाइप. यहां बहुत आसान डेमो और ज़्यादा मुश्किल डेमो दिया गया है.
इसे आगे बढ़ाने के लिए, हमें यह पता लगाना होगा कि हर पेज, ट्रांज़िशन में कैसे शामिल होता है. फ़िलहाल, हम मेटा टैग: <meta name="view-transition" content="same-origin"> का इस्तेमाल कर रहे हैं. हालांकि, हमें लगता है कि सीएसएस (कंपैरिज़न शॉपिंग सर्विस) इसके लिए बेहतर जगह है. हम यह भी आसान बनाना चाहते हैं कि यह पता लगाया जा सके कि ट्रांज़िशन किस तरह के पेज से किया जा रहा है. इसके लिए, JavaScript लिखने की ज़रूरत नहीं होगी.
हमें बहुत काम करना है. इसलिए, हम इसे 'जल्दी' से 'ठीक' तरीके से लॉन्च करना चाहते हैं. हालांकि, यह सुविधा हमारे लिए ज़रूरी है.
कंपोज़िटर से चलने वाले ऐनिमेशन
हमने डिफ़ॉल्ट रूप से ट्रांज़िशन ग्रुप पर चौड़ाई और ऊंचाई को ऐनिमेट करने का विकल्प चुना है, क्योंकि इसे पसंद के मुताबिक बनाना बहुत आसान है. हालांकि, इसका मतलब है कि ऐनिमेशन मुख्य थ्रेड पर चलता है, जो खास तौर पर पेज लोड होने के दौरान सही नहीं है.
हमारा प्लान है कि हम डिफ़ॉल्ट ऐनिमेशन और आम तौर पर किए जाने वाले कस्टमाइज़ेशन का पता लगाएं. इसके बाद, परफ़ॉर्मेंस को बेहतर बनाने के लिए, उन्हें कंपोजिटर-ड्रिवन ऐनिमेशन के तौर पर फिर से तैयार करें.
स्कोप वाले ट्रांज़िशन
फ़िलहाल, एसपीए ट्रांज़िशन पूरे दस्तावेज़ के दायरे में होते हैं और एक बार में सिर्फ़ एक ट्रांज़िशन चल सकता है. हम एक ऐसी सुविधा लॉन्च करना चाहते हैं जिसकी मदद से, ट्रांज़िशन को किसी खास एलिमेंट के दायरे में रखा जा सके. इससे, पेज के कई कॉम्पोनेंट अलग-अलग ट्रांज़िशन चला सकते हैं.
उदाहरण के लिए, इससे एम्बेड किए गए वीडियो प्लेयर को, एम्बेड किए गए चैट विजेट के साथ-साथ व्यू ट्रांज़िशन का इस्तेमाल करने की अनुमति मिलेगी.
नेस्ट किए गए ट्रांज़िशन ग्रुप
फ़िलहाल, सभी ::view-transition-group एक-दूसरे के भाई-बहन हैं. आम तौर पर, यह एक अच्छी बात होती है, क्योंकि इससे व्यू को एक कंटेनर से दूसरे कंटेनर में ट्रांज़िशन करने की सुविधा मिलती है. साथ ही, आपको क्लिपिंग की चिंता करने की ज़रूरत नहीं होती.
हालांकि, कभी-कभी आपको किसी पैरंट व्यू को क्लिप करना होता है. यह ट्रांज़िशन में भी शामिल हो सकता है.
हम ऐसे ऑप्ट-इन की जांच करना चाहते हैं जो किसी खास ::view-transition-group को किसी दूसरे ::view-transition-group में डालता है.
ट्रांज़िशन की कैटगरी
हर view-transition-name यूनीक होना चाहिए. इस तरह, हम यह पता लगाते हैं कि डीओएम में बदलाव होने के बाद भी, कोई एलिमेंट वैचारिक तौर पर "एक जैसा" है या नहीं. भले ही, वह एलिमेंट असल में एक जैसा न हो.
हालांकि, कभी-कभी अलग-अलग view-transition-name वाली चीज़ों के लिए एक ही तरह के ऐनिमेशन का इस्तेमाल किया जाना चाहिए. फ़िलहाल, इसका मतलब है कि हर view-transition-name के लिए एक सिलेक्टर नियम जोड़ना.
हम इस समस्या को हल करने के लिए, ट्रांज़िशन की क्लास बनाने का एक तरीका जोड़ना चाहते हैं.
स्क्रीन के बाहर मौजूद एलिमेंट को अनदेखा करना
अगर किसी एलिमेंट को view-transition-name दिया जाता है, तो वह अपने ग्रुप के तौर पर ट्रांज़िशन में शामिल होगा. हालांकि, कभी-कभी ऐसा करना सही नहीं होता. उदाहरण के लिए, अगर किसी हेडर को view-transition-name दिया जाता है और आपने पेज को 2,000 पिक्सल नीचे स्क्रोल किया है, तो पेज के सबसे ऊपर जाने पर हेडर 2,000 पिक्सल से ऐनिमेट होगा. यह समय के हिसाब से गलत लगता है.
इसके बजाय, हम एक ऐसा ऑप्ट-इन जोड़ना चाहते हैं जिसमें किसी एलिमेंट को अनदेखा किया जाएगा. ऐसा तब होगा, जब वह पूरी तरह से व्यूपोर्ट के बाहर हो और उसमें view-transition-name न हो.
style.viewTransitionName को डाइनैमिक तौर पर सेट करके, JavaScript की मदद से पहले से ही ऐसा किया जा सकता है. हालांकि, हमें लगता है कि इसके लिए, हमें एक ऐसा सलूशन देना चाहिए जिसमें साफ़ तौर पर बताया गया हो कि क्या करना है.
requestAnimationFrame से चलने वाले ऐनिमेशन
वेब ऐनिमेशन API की मदद से, JavaScript की मदद से व्यू ट्रांज़िशन ऐनिमेशन बनाए जा सकते हैं. हालांकि, कभी-कभी आपको requestAnimationFrame की मदद से फ़्रेम-दर-फ़्रेम ऐनिमेशन बनाने की ज़रूरत पड़ती है.
ऐसा पहले से ही किया जा सकता है, लेकिन यह थोड़ा मुश्किल है. यहां एक डेमो दिया गया है. इसमें कुछ ऐसे टूल के बारे में बताया गया है जो शायद आपको काम के लगें. हम इसे हैक नहीं करना चाहते!
हम इसे दो हिस्सों में करेंगे. पहला, ऐनिमेशन पूरा होने का समय बताने के लिए एपीआई उपलब्ध कराना. दूसरा, स्यूडो-एलिमेंट को JavaScript का ऐक्सेस देकर. हो सकता है कि दूसरा चरण काफ़ी मुश्किल हो, लेकिन लंबे समय में यह सही कदम साबित होगा.
अब जाकर, वीडियो के व्यू में शानदार ट्रांज़िशन जोड़ें!
हमें उम्मीद है कि मेरी तरह ही, आपको भी इस सुविधा के मौजूदा और आने वाले समय के बारे में जानने में दिलचस्पी होगी. अगर आपका कोई सुझाव, राय या शिकायत है या आपको अपने बनाए गए व्यू ट्रांज़िशन दिखाने हैं, तो कृपया Twitter या Mastodon पर हमसे संपर्क करें. भले ही, वे ट्रांज़िशन शानदार और काम के हों या सिर्फ़ सादे बेवकूफ़ हों!