व्यू ट्रांज़िशन में नया क्या है (2025 का अपडेट)

Bramus

पब्लिश किया गया: 08 अक्टूबर, 2025

हमने 2023 में एक ही दस्तावेज़ में व्यू ट्रांज़िशन की सुविधा लॉन्च की थी. तब से, इसमें कई बदलाव हुए हैं.

साल 2024 में, हमने एक से ज़्यादा दस्तावेज़ों के लिए व्यू ट्रांज़िशन की सुविधा लॉन्च की. साथ ही, view-transition-class और व्यू ट्रांज़िशन के टाइप जैसे सुधार किए. इसके अलावा, Safari ने भी व्यू ट्रांज़िशन की सुविधा के लिए सहायता जोड़ी.

इस पोस्ट में, 2025 में व्यू ट्रांज़िशन से जुड़े बदलावों की खास जानकारी दी गई है.

ब्राउज़र और फ़्रेमवर्क के साथ बेहतर तरीके से काम करता है

एक ही दस्तावेज़ में व्यू ट्रांज़िशन की सुविधा, जल्द ही नई सुविधाओं के साथ उपलब्ध होगी

Interop 2025 का मुख्य फ़ोकस, View Transition API पर है. खास तौर पर, document.startViewTransition(updateCallback) और view-transition-class के साथ एक ही दस्तावेज़ में व्यू ट्रांज़िशन, view-transition-name: match-element के साथ अपने-आप नाम तय होना, और :active-view-transition सीएसएस सिलेक्टर.

Firefox, इन सुविधाओं को Firefox 144 की आने वाली रिलीज़ में शामिल करना चाहता है. यह रिलीज़ 14 अक्टूबर, 2025 को उपलब्ध होगी. इससे ये सुविधाएं, Baseline Newly available बन जाएंगी.

View Transition API के लिए सपोर्ट अब React के कोर में है

React टीम पूरे साल, React के कोर में व्यू ट्रांज़िशन जोड़ने पर काम करती रही है. उन्होंने अप्रैल में react@experimental इसकी सुविधा लॉन्च करने का एलान किया था. इस हफ़्ते, React Conf में उन्होंने इसकी सुविधा को react@canary में शामिल कर दिया है. इसका मतलब है कि डिज़ाइन लगभग फ़ाइनल हो चुका है.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

ज़्यादा जानकारी के लिए, React के <ViewTransition> दस्तावेज़ देखें या इस विषय के बारे में अच्छी जानकारी पाने के लिए, ऑरोरा शार्फ़ का यह वीडियो देखें.

हाल ही में लॉन्च की गई सुविधाएं

view-transition-name: match-element की मदद से एलिमेंट के नाम अपने-आप जनरेट होने की सुविधा

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

हालांकि, जब कई ऐसे एलिमेंट को ट्रांज़िशन किया जाता है जिनमें कोई बदलाव नहीं होता है, तो उन्हें यूनीक नाम देना मुश्किल हो सकता है. अगर आपके पास सूची में मौजूद 100 एलिमेंट हैं, तो आपको उनके लिए 100 यूनीक नाम देने होंगे.

match-element की मदद से, आपको यह सब करने की ज़रूरत नहीं है. view-transition-name के लिए इस वैल्यू का इस्तेमाल करने पर, ब्राउज़र हर मैच किए गए एलिमेंट के लिए एक इंटरनल view-transition-name जनरेट करेगा. यह एलिमेंट की पहचान के आधार पर होगा.

नीचे दिए गए डेमो में इस तरीके का इस्तेमाल किया गया है. लाइन में मौजूद हर कार्ड को अपने-आप जनरेट होने वाला view-transition-name मिलता है.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

जो कार्ड अंदर या बाहर जाता है उसे एक नाम दिया जाता है. इस नाम का इस्तेमाल सीएसएस में किया जाता है, ताकि उस स्नैपशॉट पर खास ऐनिमेशन जोड़े जा सकें. अन्य सभी कार्ड के स्नैपशॉट को उनसे जुड़े view-transition-class का इस्तेमाल करके स्टाइल किया जाता है.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

DevTools अब उन नियमों को दिखाता है जो view-transition-class का इस्तेमाल करने वाले सूडो को टारगेट करते हैं

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

पहले, ::view-transition-* छद्म-तत्वों में से किसी एक की जांच करते समय, Chrome DevTools उन नियमों को नहीं दिखाता था जो सेट view-transition-class का इस्तेमाल करके छद्म-तत्वों को टारगेट करते थे. Chrome 139 में यह सुविधा जोड़ी गई है.

नेस्ट किए गए व्यू ट्रांज़िशन ग्रुप, Chrome 140 से उपलब्ध हैं

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

यह फ़्लैट ट्री अप्रोच, इस्तेमाल के कई मामलों के लिए काफ़ी है. हालांकि, क्लिपिंग या 3D ट्रांसफ़ॉर्म जैसे विज़ुअल इफ़ेक्ट इस्तेमाल करने पर यह समस्या पैदा करता है. इसके लिए, ट्री में कुछ क्रम की ज़रूरत होती है.

"नेस्टेड व्यू ट्रांज़िशन ग्रुप" की मदद से, अब ::view-transition-group स्यूडो-एलिमेंट को एक-दूसरे में नेस्ट किया जा सकता है. व्यू ट्रांज़िशन ग्रुप को नेस्ट करने पर, ट्रांज़िशन के दौरान क्लिपिंग जैसे इफ़ेक्ट को वापस लाया जा सकता है.

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

स्यूडो-एलिमेंट अब ज़्यादा ऐनिमेशन प्रॉपर्टी इनहेरिट करते हैं

जब किसी ::view-transition-group(…) स्यूडो पर animation-* लॉन्गहैंड प्रॉपर्टी में से किसी एक को सेट किया जाता है, तो उसमें मौजूद ::view-transition-image-pair(…), ::view-transition-old(…), और ::view-transition-new(…) भी उस प्रॉपर्टी को इनहेरिट करते हैं. यह इसलिए काम का है, क्योंकि यह ::view-transition-new(…) और ::view-transition-old(…) के बीच क्रॉस-फ़ेड को ::view-transition-group(…) के साथ अपने-आप सिंक करता रहता है.

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

शुरुआत में, इनहेरिटेंस की यह सुविधा सिर्फ़ animation-duration और animation-fill-mode (बाद में animation-delay के लिए भी) के लिए उपलब्ध थी. हालांकि, अब इसे ज़्यादा ऐनिमेशन लॉन्गहैंड के लिए बढ़ा दिया गया है.

व्यू ट्रांज़िशन की सुविधा के साथ काम करने वाले ब्राउज़र में, अब उनकी यूज़र-एजेंट स्टाइलशीट में यह होना चाहिए

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Chrome 140 में, स्यूडो-एलिमेंट को ज़्यादा प्रॉपर्टी इनहेरिट करने की सुविधा लॉन्च की गई है.

finished प्रॉमिस कॉलबैक का एक्ज़ीक्यूशन अब फ़्रेम का इंतज़ार नहीं करता

finished प्रॉमिस का इस्तेमाल करके कॉलबैक को लागू करने के लिए, Chrome उस लॉजिक को लागू करने से पहले फ़्रेम के जनरेट होने का इंतज़ार करता था. इससे ऐनिमेशन के आखिर में फ़्लिकर हो सकता है, जब स्क्रिप्ट विज़ुअल तौर पर मिलती-जुलती स्थिति को बनाए रखने के लिए कुछ स्टाइल को इधर-उधर करती है.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

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

टाइमिंग में बदलाव करने की यह सुविधा, Chrome 140 में उपलब्ध है.

आने वाली सुविधाएं

साल अभी खत्म नहीं हुआ है, इसलिए कुछ और सुविधाएं लॉन्च करने के लिए अब भी समय है.

स्कोप की गई व्यू ट्रांज़िशन की सुविधा, Chrome 140 में टेस्ट करने के लिए उपलब्ध है

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

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

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

इस सुविधा को Chrome 140 से टेस्ट किया जा सकता है. इसके लिए, chrome://flags में "एक्सपेरिमेंट के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं" फ़्लैग चालू करना होगा. हम डेवलपर से लगातार फ़ीडबैक ले रहे हैं.

Chrome 142 में, ::view-transition की पोज़िशन fixed से बदलकर absolute हो जाएगी

फ़िलहाल, ::view-transition छद्म क्लास को position: fixed का इस्तेमाल करके पोज़िशन किया गया है. सीएसएस वर्किंग ग्रुप के फ़ैसले के बाद, इसे position: absolute में बदल दिया जाएगा.

position वैल्यू में fixed से absolute तक का यह बदलाव, Chrome 142 में लागू होगा. हालांकि, इसे विज़ुअल तौर पर नहीं देखा जा सकता, क्योंकि ::view-transition सूडो का कंटेनिंग ब्लॉक, स्नैपशॉट कंटेनिंग ब्लॉक ही होता है. सिर्फ़ getComputedStyle करने पर, position वैल्यू में बदलाव देखा जा सकता है.

document.activeViewTransition को Chrome 142 में लॉन्च किया जाएगा

व्यू ट्रांज़िशन शुरू होने पर, ViewTransition इंस्टेंस बन जाता है. इस ऑब्जेक्ट में कई प्रॉमिस और ट्रांज़िशन की प्रोग्रेस को ट्रैक करने की सुविधा होती है. साथ ही, इसमें ट्रांज़िशन को स्किप करने या उसके टाइप में बदलाव करने जैसे बदलाव किए जा सकते हैं.

इस इंस्टेंस को मैन्युअल तरीके से ट्रैक करने के बजाय, Chrome अब एक document.activeViewTransition प्रॉपर्टी उपलब्ध कराता है. यह प्रॉपर्टी इस ऑब्जेक्ट को दिखाती है. अगर कोई ट्रांज़िशन नहीं चल रहा है, तो इसकी वैल्यू null होती है.

एक ही दस्तावेज़ में व्यू ट्रांज़िशन के लिए, document.startViewTransition को कॉल करने पर वैल्यू सेट हो जाती है. अलग-अलग दस्तावेज़ों में व्यू ट्रांज़िशन के लिए, pageswap और pagereveal इवेंट में उस ViewTransition इंस्टेंस को ऐक्सेस किया जा सकता है.

document.activeViewTransition के लिए सहायता, Chrome 142 में जल्द ही उपलब्ध होगी.

ViewTransition.waitUntil का इस्तेमाल करके, व्यू ट्रांज़िशन को अपने-आप पूरा होने से रोकना

सभी ऐनिमेशन पूरे होने पर, व्यू ट्रांज़िशन अपने-आप finished स्थिति में पहुंच जाता है. इस प्रोसेस को अपने-आप पूरा होने से रोकने के लिए, जल्द ही ViewTranistion.waitUntil का इस्तेमाल किया जा सकता है. प्रॉमिस पास करने पर, ViewTransition सिर्फ़ तब finished स्थिति में पहुंचेगा, जब पास किया गया प्रॉमिस भी हल हो जाएगा.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

यह बदलाव इस साल के आखिर तक उपलब्ध होगा. इससे, उदाहरण के लिए, fetch का इंतज़ार किया जा सकेगा या स्क्रोल-ड्रिवन व्यू ट्रांज़िशन को आसानी से लागू किया जा सकेगा.

आगे क्या करना है

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

अगर आपको व्यू ट्रांज़िशन के बारे में कोई सवाल पूछना है, तो सोशल मीडिया पर हमसे संपर्क करें. व्यू ट्रांज़िशन के लिए सुविधा के अनुरोध, सीएसएस डब्ल्यूजी में सबमिट किए जा सकते हैं. अगर आपको कोई गड़बड़ी मिलती है, तो हमें बताने के लिए Chromium में गड़बड़ी की शिकायत करें.