पब्लिश होने की तारीख: 10 सितंबर, 2025
स्कोप की गई व्यू ट्रांज़िशन, View Transition API का एक प्रस्तावित एक्सटेंशन है. इसकी मदद से, DOM के सबट्री पर व्यू ट्रांज़िशन शुरू किया जा सकता है. इस सुविधा को Chrome 140 में टेस्ट किया जा सकता है. इसके लिए, chrome://flags में "Experimental Web Platform features" फ़्लैग चालू करना होगा. हम डेवलपर से सुझाव/राय/शिकायत पाने के लिए लगातार काम कर रहे हैं.
संक्षिप्त परिचय
स्कोप किए गए व्यू ट्रांज़िशन को शुरू करने के लिए, contain: layout लागू किए गए किसी भी HTMLElement पर document.startViewTransition() के बजाय element.startViewTransition() को कॉल करें.
document.querySelector('nav').startViewTransition({
callback: () => {
// … code that manipulates the contents of <nav>
},
})
नतीजे के तौर पर, आपको चुने गए HTMLElement के सबट्री के लिए स्कोप की गई व्यू ट्रांज़िशन दिखेगी. साथ ही, नतीजे के तौर पर मिले ::view-transition सूडो-ट्री को उस HTMLElement में इंजेक्ट किया जाएगा. HTMLElement, ट्रांज़िशन ऐनिमेशन के लिए कंटेनर के तौर पर काम करता है.
html
├─ head
└─ body
├─ nav
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(thing)
│ │ └─ ::view-transition-image-pair(thing)
│ │ ├─ ::view-transition-old(thing)
│ │ └─ ::view-transition-new(thing)
│ └─ ul
│ ├─ li
│ ├─ li
│ └─ li
└─ main
└─ …
स्कोप की गई ट्रांज़िशन की मदद से, एक साथ कई व्यू ट्रांज़िशन चलाए जा सकते हैं. हालांकि, इसके लिए ज़रूरी है कि उनके ट्रांज़िशन रूट अलग-अलग हों. पॉइंटर इवेंट को सिर्फ़ उस सबट्री पर रोका जाता है जिसे फिर से चालू किया जा सकता है. पूरे दस्तावेज़ पर नहीं. इसके अलावा, ये ट्रांज़िशन रूट के बाहर मौजूद एलिमेंट को, स्कोप किए गए व्यू ट्रांज़िशन के ऊपर पेंट करने की अनुमति देते हैं.
स्कोप की गई व्यू ट्रांज़िशन के बारे में जानकारी देने वाले लेख में, स्कोप की गई व्यू ट्रांज़िशन के बारे में पूरी जानकारी पाएं.
डेमो
इस डेमो में, किसी बटन पर क्लिक करके, बिंदु को उसके कंटेनर में ले जाया जा सकता है. इसे दस्तावेज़ के स्कोप वाली व्यू ट्रांज़िशन या एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन की मदद से किया जा सकता है. इससे आपको यह पता चल सकता है कि ये दोनों अलग-अलग तरीके से कैसे काम करती हैं.
लाइव डेमो
डेमो रिकॉर्डिंग
स्कोप की गई व्यू ट्रांज़िशन के साथ, ट्रांज़िशन के दौरान डॉट को उसके पैरंट से क्लिप किया जाता है. इसके अलावा, दिखाए जाने पर डॉट, पॉपओवर के ऊपर नहीं दिखता.
सुझाव/राय दें या शिकायत करें
हमें वेब डेवलपर कम्यूनिटी से इन विषयों पर सुझाव/राय चाहिए या शिकायतें चाहिए:
- स्कोप की गई व्यू ट्रांज़िशन एपीआई का आकार.
- ऐसे इस्तेमाल के उदाहरण जहां सुविधा ठीक से काम करती है या उम्मीद के मुताबिक काम नहीं करती है.
- खुद से जुड़ी गतिविधियों के स्कोप के बारे में पूछे गए सवालों को कैसे हल किया जाना चाहिए.
CSS WG issue #9890 पर टिप्पणी करके, अपने सुझाव/राय दें या शिकायत करें. सुझाव/राय देने या शिकायत करने से पहले, ऐसी समस्याएं और सीमाएं देखें जिनके बारे में पहले से जानकारी है.
अगर आपको कोई गड़बड़ी मिलती है, तो हमें बताने के लिए Chromium में गड़बड़ी की शिकायत करें.