व्यू ट्रांज़िशन एपीआई से, दोनों स्थितियों के बीच ऐनिमेशन वाला ट्रांज़िशन जनरेट करते समय, एक ही चरण में डीओएम को अपडेट किया जा सकता है.
इस तरह के ट्रांज़िशन के लिए, डेवलपर अक्सर अनुरोध करते थे. इन सुविधाओं का मैं भी इस्तेमाल करता/करती थी. मुझे लगता है कि हमने इस सुविधा को इस तरह उपलब्ध कराया है कि इससे बेहतर सेटिंग और ज़रूरत के हिसाब से बदलाव करने की सुविधा मिलती है. ऐसा लगता है कि हम अपनी तरफ़ से झगड़ रहे हैं, लेकिन इस सुविधा को डिज़ाइन करने के लिए डेवलपर के सुझाव, शिकायत या राय सबसे अहम है. इस सुविधा का पहले का एक प्रोटोटाइप बहुत कम सुविधाजनक था. साथ ही, जिन लोगों (आप जैसे?) ने प्रोटोटाइप के साथ खेलने और सुझाव देने के लिए समय निकाला, उन्होंने दोबारा विचार करने की शुरुआत की. धन्यवाद!
इस सुविधा को समझने और इसके डेमो को आज़माने के लिए, हमारी गाइड देखें. अगर आपको लगता है कि कुछ जानकारी यहां नहीं मिलती है, तो कृपया Twitter पर हमसे संपर्क करें, Mastodon या ईमेल के ज़रिए.
फ़िलहाल, व्यू ट्रांज़िशन एपीआई सिर्फ़ Chrome पर उपलब्ध है. अच्छी बात यह है कि इसे बेहतर बनाने के लिए, इस्तेमाल किया जा सकता है. इस गाइड में एक हेल्पर फ़ंक्शन के बारे में बताया गया है, जिसे सभी ब्राउज़र पर इस्तेमाल किया जा सकता है. हालांकि, सिर्फ़ उन ब्राउज़र को ऐनिमेशन मिलेगा जिनमें व्यू ट्रांज़िशन की सुविधा काम करती है.
हमने इस सुविधा को सीएसएस वर्किंग ग्रुप में डेवलप किया है. इसके लिए, अन्य ब्राउज़र वेंडर और स्वतंत्र उपयोगकर्ताओं से मिले इनपुट का इस्तेमाल किया गया है. हमें यह नहीं पता कि दूसरे ब्राउज़र व्यू ट्रांज़िशन का इस्तेमाल करेंगे या नहीं और कब करेंगे. हालांकि, हम Mozilla के स्टैंडर्ड की पोज़िशन और WebKit के स्टैंडर्ड पोज़िशन पर नज़र रखते हैं.
लेकिन, हम अभी तक 'हो गया' नहीं हैं!
Chrome 111 में सिर्फ़ पहली रिलीज़ लॉन्च होने वाली सुविधा है. हमें उम्मीद है कि हमें सभी गड़बड़ियां पहले ही मिल चुकी हैं. हालांकि, अगर आपको कोई समस्या मिलती है, तो कृपया crbug.com पर जाएं. अगर आपको कोई समस्या मिलती है, तो कृपया कम डेमो के ज़रिए यह जानकारी दें. अगर आपको इस बारे में कोई जानकारी नहीं है या आप इससे सहज नहीं हैं, तो Twitter पर हमसे संपर्क करें, Mastodon या ईमेल के ज़रिए. हम आपकी मदद करेंगे.
यह रिलीज़, बड़े वर्शन का एक छोटा, लेकिन उम्मीद के तौर पर फ़ायदेमंद हिस्सा है. हमने पहले ही इस सुविधा के लिए कुछ एक्सटेंशन तैयार कर लिए हैं, ताकि यह पक्का किया जा सके कि आज हम जिन हिस्सों की शिपिंग कर रहे हैं वे आने वाले समय में भी काम करेंगे.
हम जो सोच रहे हैं उसकी झलक यहां दी गई है. इन ऐप्लिकेशन को प्राथमिकता के हिसाब से क्रम में नहीं लगाया जाता है. हालांकि, हो सकता है कि कई लोगों के लिए, इनमें से पहला सबसे अहम हो. इसलिए, हमें इस बारे में सुझाव ज़रूर दें कि आपके लिए कौनसे जोड़ सबसे ज़्यादा ज़रूरी हैं.
सभी दस्तावेज़ों में ट्रांज़िशन
मेरे ख्याल से ज़्यादातर डेवलपर इस पर काम करना चाहते हैं और अच्छी बात यह है कि हम इस पर पहले से ही काम कर रहे हैं!
'ट्रांज़िशन एपीआई' को इसलिए डिज़ाइन किया गया है, ताकि यह एक जैसे ऑरिजिन वाले दस्तावेज़ों पर काम कर सके. फ़र्क़ सिर्फ़ यह है कि DOM स्थिति में बदलाव का सिग्नल देने वाले startViewTransition के बजाय, नेविगेशन खुद ही उस बदलाव का संकेत देगा.
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 देते हैं और आप ऐसी स्थिति से आगे बढ़ते हैं जहां आपको 2000 पिक्सल तक नीचे स्क्रोल किया जाता है, तो पेज के सबसे ऊपर, हेडर 2000 पिक्सल दूर से ऐनिमेट होता है, जो समय के हिसाब से गलत लग रहा है.
इसके बजाय, हम एक ऑप्ट-इन को जोड़ना चाहेंगे, जिसमें किसी एलिमेंट को अनदेखा किया जाएगा. जैसे, अगर यह व्यूपोर्ट से पूरी तरह से बाहर है, तो इसमें view-transition-name मौजूद नहीं है.
JavaScript की मदद से पहले से ही ऐसा करने के लिए, डाइनैमिक तौर पर style.viewTransitionName को सेट करें. हालांकि, ऐसा लगता है कि हमारे पास इसके लिए कोई डिक्लेरेटिव सलूशन होना चाहिए.
requestAnimationFrame की ओर से चलाए जाने वाले ऐनिमेशन
आपके पास पहले से ही वेब ऐनिमेशन एपीआई का इस्तेमाल करके, JavaScript का इस्तेमाल करके ट्रांज़िशन वाले ऐनिमेशन बनाने का विकल्प है. हालांकि, कभी-कभी आपको requestAnimationFrame का इस्तेमाल करके, फ़्रेम-दर-फ़्रेम नई चीज़ों को ड्राइव करना होगा.
आप पहले से ही ऐसा कर सकते हैं, लेकिन यह काफ़ी हैकी है. यहां एक डेमो दिया गया है. इसमें कुछ ऐसे मददगार सुझाव दिए गए हैं जो शायद आपको काम के लगें. हम इसे हैकी नहीं बनाना चाहते!
हम इस प्रोसेस को दो हिस्सों में करेंगे. पहला, एपीआई देकर यह बताएं कि ऐनिमेशन कब पूरा हो गया. दूसरा चरण, JavaScript को नकली एलिमेंट का ऐक्सेस देना. वह दूसरा हिस्सा बहुत बड़ा काम हो सकता है, लेकिन यह लंबे समय के लिए सही काम करने जैसा ही लगता है.
अब कुछ शानदार व्यू ट्रांज़िशन करें!
उम्मीद है कि मेरी तरह आप भी इस सुविधा के वर्तमान और भविष्य को लेकर उत्साहित हैं. अगर आपका कोई सुझाव, राय या शिकायत है या आपको अपने वीडियो के व्यू में हुए कुछ ट्रांज़िशन को लोगों के सामने पेश करना है, फिर चाहे वे आसान और सुविधाजनक हों या सिर्फ़ सामान्य बेवकूफ़ हों, तो कृपया Twitter पर हमसे संपर्क करें या Mastodon!