पब्लिश होने की तारीख: 27 मार्च, 2026
Chrome 147 में एलिमेंट-स्कोप वाली व्यू ट्रांज़िशन की सुविधा जोड़ी गई है. इसकी मदद से, Element.startViewTransition() को कॉल करके, DOM के सबट्री पर व्यू ट्रांज़िशन शुरू किया जा सकता है.
इस सुविधा की मदद से, एक साथ कई व्यू ट्रांज़िशन चलाए जा सकते हैं. साथ ही, चालू व्यू ट्रांज़िशन को नेस्ट किया जा सकता है. इसके अलावा, position: fixed कॉन्टेंट के साथ लेयरिंग से जुड़ी समस्याओं को हल किया जा सकता है. ये सभी काम, पेज के बाकी हिस्से को इंटरैक्टिव बनाए रखते हुए किए जाते हैं.
क्या बदलाव हुआ है?
हमने Chrome 140 में डेवलपर टेस्टिंग के लिए सुविधा उपलब्ध होने का एलान किया था. इसके बाद, हमने कम्यूनिटी और सीएसएस वर्किंग ग्रुप के साथ मिलकर, इस सुविधा के बारे में ज़्यादा जानकारी इकट्ठा की. खास तौर पर, डिफ़ॉल्ट व्यवहार के बारे में:
- स्कोप रूट, डिफ़ॉल्ट रूप से खुद हिस्सा लेते हैं.
- स्कोप की गई व्यू ट्रांज़िशन में, नेस्ट किए गए व्यू ट्रांज़िशन ग्रुप का इस्तेमाल करके, नेस्ट किए गए सूडो अपने-आप शामिल हो जाते हैं.
- स्कोप की गई व्यू ट्रांज़िशन में मौजूद
::view-transition-group-children()सूडो एलिमेंट, अपने कॉन्टेंट को अपने-आप काट देता है. ऐसा तब होता है, जब स्कोप रूट अपने कॉन्टेंट के ओवरफ़्लो को काट देता है. - एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन, ट्रांज़िशन के दौरान स्कोप रूट पर
contain: layoutऔरview-transition-scope: allको अपने-आप लागू करती हैं.
इन अपडेट के बाद, एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन की सुविधा, Chrome के स्टेबल वर्शन 147 से उपलब्ध है.
डेमो
सूचियों को शफ़ल करना
इस डेमो में, आपको हर सूची में मौजूद आइटम को शफ़ल करने की सुविधा मिलती है. बीच में मौजूद बटन को चुनकर, सूचियों की जगहें भी बदली जा सकती हैं.
लाइव डेमो
डेमो रिकॉर्डिंग
एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन का इस्तेमाल किया जाता है. इसलिए, दोनों सूचियां एक साथ शफ़ल व्यू ट्रांज़िशन चला सकती हैं. इसके अलावा, आउटर व्यू ट्रांज़िशन भी शुरू किया जा सकता है. इससे सूचियों की जगहें बदल जाती हैं. हालांकि, इस दौरान सूची के आइटम फिर से व्यवस्थित किए जा रहे होते हैं.
पैटागोनिया की मेरी यात्रा
"My Patagonia Trip" डेमो में, एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन दिखाई गई हैं. इस डेमो को "वेब यूज़र एक्सपीरियंस को बेहतर बनाएं" कैंपेन वीडियो के आधार पर बनाया गया है.
ग्रिड आइटम को फ़िल्टर करने के लिए, ड्रॉपडाउन का इस्तेमाल करें. हर ग्रिड आइटम को चुने गए आइटम की सूची में जोड़ने के लिए, जोड़ें बटन का इस्तेमाल करें. यह सूची, साइडबार में दिखती है.
लाइव डेमो
पूरा डेमो देखने के लिए, "My Patagonia Trip" को किसी दूसरे टैब में खोलें.
डेमो रिकॉर्डिंग
डेमो में, एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन का इस्तेमाल तीन जगहों पर किया गया है:
- आइटम को फ़िल्टर करते समय उनका ग्रिड.
- चुने गए आइटम की सूची में जोड़ते समय, ग्रिड के आइटम.
- साइडबार, जिसमें चुने गए आइटम की सूची दिखती है.
गाइड पढ़ें
एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन के बारे में पूरी जानकारी पाने के लिए, गाइड पढ़ें. इसमें एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन को लागू करने का तरीका बताया गया है. साथ ही, इसमें ज़्यादा जानकारी दी गई है और ज़्यादा डेमो शामिल किए गए हैं.