एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन की मदद से, एक साथ और नेस्ट की गई व्यू ट्रांज़िशन चलाएं

Bramus

पब्लिश होने की तारीख: 27 मार्च, 2026

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

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

document.startViewTransition() या इसके क्रॉस-डॉक्यूमेंट काउंटरपार्ट का इस्तेमाल करके एक ही दस्तावेज़ के व्यू ट्रांज़िशन को शुरू करने पर, ब्राउज़र, व्यू ट्रांज़िशन के नतीजे को दस्तावेज़ के स्कोप में रखता है.

अपडेट कॉलबैक के एक्ज़ीक्यूट होने और ब्राउज़र के सभी ज़रूरी एलिमेंट के स्नैपशॉट लेने के बाद, ::view-transition ओवरले और उसके छद्म-एलिमेंट का ट्री, :root एलिमेंट से जुड़ जाता है. यहां दिए गए उदाहरण में, html एलिमेंट से जुड़ जाता है.

html
  ├─ ::view-transition
  │  └─ ::view-transition-group(root)
  │     └─ ::view-transition-image-pair(root)
  │        ├─ ::view-transition-old(root)
  │        └─ ::view-transition-new(root)
  ├─ head
  └─ body
     └─ …

::view-transition लेयर, ट्रांज़िशन रूट के सबसे ऊपर रेंडर होती है. इसलिए, इससे अनचाही स्थितियां पैदा हो सकती हैं. उदाहरण के लिए, ऐसा हो सकता है कि व्यू ट्रांज़िशन में हिस्सा लेने वाले एलिमेंट, अचानक से हिस्सा न लेने वाले अन्य एलिमेंट पर ओवरलैप हो जाएं. इसके अलावा, ऐसा भी हो सकता है कि व्यू ट्रांज़िशन के दौरान, एलिमेंट को उनके पैरंट रैपर से क्लिप न किया जाए.

::view-transition पर pointer-events को फिर से चालू करने या नेस्ट किए गए व्यू ट्रांज़िशन ग्रुप का इस्तेमाल करने से, दस्तावेज़ के दायरे में आने वाले व्यू ट्रांज़िशन से होने वाले कुछ साइड इफ़ेक्ट को ठीक किया जा सकता है. हालांकि, इन तरीकों से सभी समस्याएं हल नहीं की जा सकतीं.

उदाहरण के लिए, ट्रांज़िशन चालू होने के दौरान, position: fixed या पॉपओवर वाले एलिमेंट अब भी दस्तावेज़ के स्कोप वाले व्यू ट्रांज़िशन से धुंधले हो जाते हैं. इसे z-index की समस्या भी कहा जाता है.

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

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

व्यू ट्रांज़िशन को एलिमेंट के स्कोप में रखना

एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन की मदद से, डीओएम के सबट्री पर व्यू ट्रांज़िशन शुरू किया जा सकता है. document.startViewTransition() को कॉल करने के बजाय, किसी भी एलिमेंट पर element.startViewTransition() को कॉल करें. इससे व्यू ट्रांज़िशन का दायरा उस एलिमेंट तक सीमित हो जाता है.

यहां दिए गए स्निपेट में, ब्राउज़र <ul> एलिमेंट पर एलिमेंट के स्कोप वाला व्यू ट्रांज़िशन शुरू करता है.

document.querySelector('ul').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <ul>
  },
})

जिस एलिमेंट में element.startViewTransition() को लागू किया जाता है उसे ट्रांज़िशन रूट या स्कोप कहा जाता है. उदाहरण के लिए, <ul>.

जब ब्राउज़र किसी एलिमेंट के लिए व्यू ट्रांज़िशन को स्कोप करता है, तो उसे बाकी DOM से अलग कर दिया जाता है:

• ब्राउज़र, स्नैपशॉट लेने के लिए सिर्फ़ स्कोप की सबट्री में मौजूद एलिमेंट ढूंढता है.
• स्नैपशॉट लेने की प्रोसेस के दौरान, update कॉलबैक के चालू होने पर, सिर्फ़ स्कोप की रेंडरिंग रुकती है.
• इसके बाद, ::view-transition का स्यूडो-ट्री, ट्रांज़िशन रूट में जुड़ जाता है.

उदाहरण के लिए, <ul> का इस्तेमाल करने पर, व्यू ट्रांज़िशन के चालू होने के दौरान DOM ट्री ऐसा दिखता है:

html
  ├─ head
  └─ body
     ├─ ul
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(root)
     │  │     ├─ ::view-transition-group-children(root)
     │  │     │  └─ …
     │  │     └─ ::view-transition-image-pair(root)
     │  │        ├─ ::view-transition-old(root)
     │  │        └─ ::view-transition-new(root)
     │  ├─ li
     │  ├─ li
     │  └─ li
     ├─ button#showpopover
     ├─ button#reorder
     └─ div#popover
        └─ p

::view-transition स्यूडो का साइज़ और शेप, ट्रांज़िशन रूट के जैसा होता है. यह सिर्फ़ ट्रांज़िशन रूट के ऊपर रेंडर होता है. इस वजह से, ट्रांज़िशन रूट के बाहर के एलिमेंट के लेयरिंग ऑर्डर का पालन किया जाता है.

उदाहरण के लिए, अगर आपके पास एक ऐसा पॉपओवर है जो <ul> एलिमेंट के ऊपर दिखता है और फिर <ul> एलिमेंट पर एलिमेंट-स्कोप वाली व्यू ट्रांज़िशन शुरू की जाती है, तो पॉपओवर को व्यू ट्रांज़िशन के सूडो-ट्री से नहीं छिपाया जाता है.

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

एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन का इस्तेमाल किया जाता है. इसलिए, ट्रांज़िशन के चालू रहने के दौरान पॉपओवर, <ul> एलिमेंट के ऊपर दिखता रहता है.

इसके अलावा, <ul> एलिमेंट के बाहर मौजूद एलिमेंट, जैसे कि बटन, इंटरैक्टिव बने रहते हैं. ऐसा इसलिए, क्योंकि ये एलिमेंट स्कोप का हिस्सा नहीं होते.

सेल्फ़-पार्टिसिपेटिंग स्कोप और नेस्ट किए गए व्यू ट्रांज़िशन ग्रुप

जब किसी ऐसे एलिमेंट पर एलिमेंट-स्कोप वाली व्यू ट्रांज़िशन शुरू की जाती है जो अपने कॉन्टेंट को क्लिप करता है (यानी, जब उसके overflow को hidden, scroll या clip पर सेट किया जाता है), तो आपको पता चलता है कि व्यू ट्रांज़िशन का कॉन्टेंट, विज़ुअल तौर पर क्लिप किया गया है.

ऐसा इसलिए है, क्योंकि एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन की सुविधा, इन कामों को अपने-आप करती है:

• स्कोप अपने-आप view-transition-name: root लागू हो जाता है. इससे यह खुद ही हिस्सा लेने वाला बन जाता है.
• नेस्ट किए गए व्यू ट्रांज़िशन ग्रुप को चालू करने के लिए, स्कोप अपने-आप view-transition-group: contain लागू हो जाता है.
• अगर स्कोप रूट अपने कॉन्टेंट को क्लिप करता है, तो इससे मिलने वाला ::view-transition-group-children(root), overflow: clip का इस्तेमाल करके अपने कॉन्टेंट को अपने-आप क्लिप कर देता है. इससे, ट्रांज़िशन रूट से बाहर निकलने से छद्म एलिमेंट को रोका जा सकता है.

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

ul li {
  view-transition-name: match-element;
  view-transition-class: album;
}

यहां दिए गए डेमो में इसे आज़माएं. इससे, खुद से हिस्सा लेने की सुविधा को बंद किया जा सकता है. जब स्कोप में खुद हिस्सा लिया जाता है (डिफ़ॉल्ट सेटिंग), तो सब कुछ उम्मीद के मुताबिक काम करता है. जब स्कोप खुद हिस्सा नहीं लेता है, तो उसका बॉर्डर तुरंत बदल जाता है. साथ ही, ट्रांज़िशन के दौरान उसका कॉन्टेंट रैपर से बाहर निकल जाता है.

रेफ़रंस के लिए, खुद के लिए बनाए गए इस डेमो का सूडो-ट्री इस तरह दिखता है:

html
  ├─ head
  └─ body
     ├─ ul
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(root)
     │  │     ├─ ::view-transition-group-children(root)
     │  │     │  ├─ ::view-transition-group(item1)
     │  │     │  │  └─ ::view-transition-image-pair(item1)
     │  │     │  │     ├─ ::view-transition-old(item1)
     │  │     │  │     └─ ::view-transition-new(item1)
     │  │     │  ├─ ::view-transition-group(item2)
     │  │     │  │  └─ …
     │  │     │  …
     │  │     └─ ::view-transition-image-pair(root)
     │  │        ├─ ::view-transition-old(root)
     │  │        └─ ::view-transition-new(root)
     │  ├─ li
     │  ├─ li
     │  └─ li
     └─ button#reorder

ट्रांज़िशन रूट, <ul> एलिमेंट, अपने कॉन्टेंट को वर्टिकल तौर पर क्लिप करता है. इसलिए, ::view-transition-group-children(root) भी अपने-आप क्लिप लागू करता है.

एक साथ कई एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन

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

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

अलग-अलग स्कोप में view-transition-name वैल्यू का फिर से इस्तेमाल किया जा सकता है. जब तक किसी नाम का स्कोप यूनीक रहता है, तब तक कोई टकराव नहीं होता.

नेस्ट किए गए एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन और व्यू-ट्रांज़िशन-नेम कंटेनमेंट

जब एलिमेंट के स्कोप वाली कई व्यू ट्रांज़िशन के डीओएम ट्री ओवरलैप होते हैं, तो view-transition-name वैल्यू के टकराव का खतरा होता है. इस वजह से, ब्राउज़र इस जोखिम को कम करने के लिए, एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन को अपने-आप view-transition-scope: all असाइन कर देता है.

anchor-scope, anchor-name की वैल्यू को जिस तरह से स्कोप करता है उसी तरह view-transition-scope प्रॉपर्टी यह पक्का करती है कि view-transition-name की वैल्यू, एलिमेंट के सबट्री के हिसाब से स्कोप की गई हों. यह प्रॉपर्टी, none, स्कोप की जाने वाली वैल्यू के नामों की सूची या सभी वैल्यू को स्कोप करने के लिए all स्वीकार करती है.

view-transition-scope, नामों को ब्लीड आउट होने से रोकने के साथ-साथ, किसी एलिमेंट और उसके कॉन्टेंट को बाहरी, एक साथ होने वाले व्यू ट्रांज़िशन से कैप्चर होने से भी रोकता है. स्नैपशॉट लेने की प्रोसेस, स्नैपशॉट लेने के लिए किसी एलिमेंट को ढूंढने के लिए सबट्री को ट्रैवर्स करती है. इस दौरान, यह उन एलिमेंट (और उनके पूरे सबट्री) को अनदेखा करती है जिन पर view-transition-scope: all लागू किया गया है. इससे यह माना जाता है कि वे एलिमेंट, एलिमेंट के स्कोप वाली किसी दूसरी व्यू ट्रांज़िशन में पहले से ही शामिल हैं.

यहां दिया गया डेमो, पिछले डेमो का एक वर्शन है. इसमें सूची के कॉन्टेंट को शफ़ल करने वाले दो बटन के अलावा, सूचियों को आपस में बदलने के लिए बदलें बटन भी होता है. .reversed क्लास को टॉगल करने पर, #lists-wrapper में बदलाव हो जाता है.

शफ़ल ट्रांज़िशन के दौरान view-transition-scope: all अपने-आप लागू हो जाता है. इसलिए, शफ़ल ट्रांज़िशन के दौरान ही, एक साथ आउटर स्वैप ट्रांज़िशन शुरू किया जा सकता है.

view-transition-scope: all, किसी एलिमेंट को आउटर ट्रांज़िशन में स्नैपशॉट होने से भी रोकता है. इसलिए, डेमो में <ul> एलिमेंट को रैप करने वाले एलिमेंट में view-transition-name वैल्यू भी जोड़ी जाती हैं.

#list1-wrapper, #list2-wrapper {
  view-transition-name: attr(id type(<custom-ident>));
}

दूसरी सूची को शफ़ल करने और फिर दोनों सूचियों को स्वैप करने के बाद, इस डेमो के लिए सूडो-ट्री ऐसा दिखता है:

html
  ├─ head
  └─ body
     └─ #lists-wrapper.reversed (SCOPE)
        ├─ ::view-transition
        │  └─ ::view-transition-group(lists-wrapper)
        │     ├─ ::view-transition-group-children(lists-wrapper)
        │     │  ├─ ::view-transition-group(list1-wrapper)
        │     │  │  └─ ::view-transition-image-pair(list1-wrapper)
        │     │  │     ├─ ::view-transition-old(list1-wrapper)
        │     │  │     └─ ::view-transition-new(list1-wrapper)
        │     │  └─ ::view-transition-group(list2-wrapper)
        │     │     └─ ::view-transition-image-pair(list2-wrapper)
        │     │        ├─ ::view-transition-old(list2-wrapper)
        │     │        └─ ::view-transition-new(list2-wrapper)
        │     └─ ::view-transition-image-pair(lists-wrapper)
        │        ├─ ::view-transition-old(lists-wrapper)
        │        └─ ::view-transition-new(lists-wrapper)
        ├─ div#list1-wrapper
        │  ├─ ul
        │  │  ├─ li#item1
        │  │  ├─ li#item2
        │  │  └─ li#item3
        │  └─ button.reorder
        └─ div#list2-wrapper
           ├─ ul (SCOPE)
           │  ├─ ::view-transition
           │  │  └─ ::view-transition-group(list)
           │  │     ├─ ::view-transition-group-children(list    )
           │  │     │  ├─ ::view-transition-group(item4)
           │  │     │  │  └─ ::view-transition-image-pair(item4)
           │  │     │  │     ├─ ::view-transition-old(item4)
           │  │     │  │     └─ ::view-transition-new(item4)
           │  │     │  ├─ ::view-transition-group(item5)
           │  │     │  │  └─ …
           │  │     │  …
           │  │     └─ ::view-transition-image-pair(list)
           │  │        ├─ ::view-transition-old(list)
           │  │        └─ ::view-transition-new(list)
           │  ├─ li#item4
           │  ├─ li#item5
           │  └─ li#item6
           └─ button.reorder

ज़्यादा जानें

एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन के बारे में ज़्यादा जानने के लिए, एक्सप्लेनर, css-view-transitions-2 स्पेसिफ़िकेशन, और ओपन स्पेसिफ़िकेशन में किए गए बदलावों की सूची देखें.