व्यू ट्रांज़िशन में नया क्या है (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 Core में उपलब्ध है

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 में गड़बड़ी की शिकायत करें.