एक पेज के ऐप्लिकेशन के लिए, एक ही दस्तावेज़ वाले व्यू में ट्रांज़िशन

Jake Archibald

Bramus

जब किसी एक दस्तावेज़ पर व्यू ट्रांज़िशन चलता है, तो उसे एक ही दस्तावेज़ वाले व्यू का ट्रांज़िशन कहा जाता है. आम तौर पर, एक पेज के ऐप्लिकेशन (एसपीए) में ऐसा होता है, जहां JavaScript का इस्तेमाल डीओएम को अपडेट करने के लिए किया जाता है. Chrome 111 और उसके बाद के वर्शन में, एक ही दस्तावेज़ वाले व्यू को ट्रांसफ़र करने की सुविधा Chrome में काम करती है.

एक ही दस्तावेज़ के व्यू का ट्रांज़िशन ट्रिगर करने के लिए, document.startViewTransition को कॉल करें:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

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

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

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

डिफ़ॉल्ट ट्रांज़िशन: क्रॉस-फ़ेड

डिफ़ॉल्ट व्यू ट्रांज़िशन, क्रॉस-फ़ेड होता है, इसलिए यह एपीआई के बारे में अच्छी तरह से बताता है:

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

जहां updateTheDOMSomehow, DOM को नई स्थिति में बदल देता है. इसे अपने हिसाब से किया जा सकता है. उदाहरण के लिए, एलिमेंट को जोड़ा या हटाया जा सकता है, क्लास के नाम बदले जा सकते हैं या स्टाइल में बदलाव किए जा सकते हैं.

और इसी तरह, पेज क्रॉस-फ़ेड हो जाते हैं:

क्रॉस-फ़ेड आकर्षक नहीं है. अच्छी बात यह है कि ट्रांज़िशन को पसंद के मुताबिक बनाया जा सकता है. हालांकि, पहले आपको यह समझना होगा कि यह बेसिक क्रॉस-फ़ेड कैसे काम करता है.

ये ट्रांज़िशन कैसे काम करते हैं

चलिए, पिछले कोड सैंपल को अपडेट करते हैं.

document.startViewTransition(() => updateTheDOMSomehow(data));

जब .startViewTransition() को कॉल किया जाता है, तो एपीआई, पेज की मौजूदा स्थिति को कैप्चर करता है. इसमें स्नैपशॉट लेना भी शामिल है.

पूरा होने पर, .startViewTransition() को पास किया गया कॉलबैक कॉल किया जाता है. यहां पर DOM बदल दिया जाता है. इसके बाद, एपीआई पेज की नई स्थिति को कैप्चर करता है.

नई स्थिति कैप्चर होने के बाद, एपीआई इस तरह से एक सूडो-एलिमेंट ट्री बनाता है:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

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

::view-transition-old(root), पुराने व्यू का स्क्रीनशॉट है और ::view-transition-new(root) नए व्यू का लाइव वर्शन है. दोनों सीएसएस 'बदले गए कॉन्टेंट' के तौर पर रेंडर होती हैं (जैसे कि <img>).

पुराना व्यू, opacity: 1 से opacity: 0 पर ऐनिमेट होता है, जबकि नया व्यू opacity: 0 से opacity: 1 में ऐनिमेट होता है और क्रॉस-फ़ेड बनाता है.

सभी ऐनिमेशन सीएसएस ऐनिमेशन का इस्तेमाल करके परफ़ॉर्म किए जाते हैं, इसलिए उन्हें सीएसएस की मदद से पसंद के मुताबिक बनाया जा सकता है.

ट्रांज़िशन को पसंद के मुताबिक बनाना

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

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

इस एक बदलाव के साथ, फ़ेड अब बहुत धीमा हो जाता है:

ठीक है, यह अब भी कुछ ज़्यादा दिलचस्प नहीं है. इसके बजाय, नीचे दिया गया कोड मटीरियल डिज़ाइन के शेयर किए गए ऐक्सिस ट्रांज़िशन को लागू करता है:

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

नतीजा यह रहा:

एक से ज़्यादा एलिमेंट का ट्रांज़िशन

पिछले डेमो में, शेयर किए गए ऐक्सिस के ट्रांज़िशन में पूरा पेज शामिल था. यह ज़्यादातर पेज के लिए काम करता है, लेकिन यह शीर्षक के लिए ठीक नहीं लगता, क्योंकि यह फिर से पीछे स्लाइड करने के लिए स्लाइड करता है.

इससे बचने के लिए, पेज के बाकी हिस्से से हेडर को निकाला जा सकता है, ताकि उसे अलग से ऐनिमेट किया जा सके. ऐसा करने के लिए, एलिमेंट को view-transition-name असाइन किया जाता है.

.main-header {
  view-transition-name: main-header;
}

view-transition-name का मान आपकी पसंद के मुताबिक हो सकता है (none को छोड़कर, जिसका मतलब है कि कोई ट्रांज़िशन नाम नहीं है). इसका इस्तेमाल, ट्रांज़िशन में एलिमेंट की खास तरीके से पहचान करने के लिए किया जाता है.

इसका नतीजा यह होता है:

अब हेडर अपनी जगह पर रहता है और क्रॉस-फ़ेड हो जाता है.

सीएसएस के इस एलान की वजह से, स्यूडो-एलिमेंट ट्री बदल गया है:

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

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

ठीक है, डिफ़ॉल्ट ट्रांज़िशन सिर्फ़ क्रॉस फ़ेड नहीं होता, बल्कि ::view-transition-group भी ट्रांज़िशन करता है:

• स्थिति और रूपांतरण (transform का उपयोग करके)
• चौड़ाई
• ऊंचाई

अब तक, इससे कोई फ़र्क़ नहीं पड़ता, क्योंकि DOM बदलाव के दोनों तरफ़ हेडर एक जैसा होता है और उसकी पोज़िशन एक जैसी होती है. हालांकि, हेडर में मौजूद टेक्स्ट को भी एक्सट्रैक्ट किया जा सकता है:

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

fit-content का इस्तेमाल इसलिए किया जाता है, ताकि एलिमेंट को बाकी चौड़ाई के बजाय टेक्स्ट का साइज़ दिखे. ऐसा न करने पर, बैक ऐरो दोनों पेजों पर एक जैसे साइज़ के बजाय, हेडर के टेक्स्ट एलिमेंट का साइज़ छोटा कर देता है.

अब हमारे पास तीन हिस्से हैं:

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

लेकिन, फिर से डिफ़ॉल्ट सेटिंग तय करें:

अब हेडिंग टेक्स्ट, 'वापस जाएं' बटन के लिए जगह बनाने के लिए अच्छी तरह से स्लाइड करता है.

view-transition-class की मदद से, कई सूडो एलिमेंट को एक ही तरह से ऐनिमेट करें

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

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

क्या आपके पास 20 एलिमेंट हैं? आपको सिर्फ़ 20 सिलेक्टर लिखने होंगे. क्या आपको नया एलिमेंट जोड़ना है? इसके बाद, आपको ऐनिमेशन स्टाइल लागू करने वाले सिलेक्टर को भी बढ़ाना होगा. सटीक रूप से बढ़ाने लायक नहीं.

view-transition-class का इस्तेमाल, व्यू ट्रांज़िशन के सूडो-एलिमेंट में किया जा सकता है, ताकि उसी स्टाइल के नियम को लागू किया जा सके.

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

यहां दिए गए कार्ड का उदाहरण, पिछले सीएसएस स्निपेट का इस्तेमाल करता है. सभी कार्ड (इनमें नए जोड़े गए कार्ड भी शामिल हैं) को चुनने पर एक ही समय दिखेगा: html::view-transition-group(.card).

डीबग ट्रांज़िशन

व्यू ट्रांज़िशन, सीएसएस ऐनिमेशन के सबसे ऊपर बनाए जाते हैं. इसलिए, Chrome DevTools में ऐनिमेशन पैनल, ट्रांज़िशन को डीबग करने के लिए सबसे अच्छा है.

ऐनिमेशन पैनल का इस्तेमाल करके, अगला ऐनिमेशन रोका जा सकता है. इसके बाद, ऐनिमेशन में आगे-पीछे स्क्रब किया जा सकता है. इस दौरान, ट्रांज़िशन के छद्म-एलिमेंट, एलिमेंट पैनल में देखे जा सकते हैं.

ट्रांज़िशन किए जा रहे एलिमेंट का एक ही डीओएम एलिमेंट होना ज़रूरी नहीं है

अब तक हमने view-transition-name का इस्तेमाल करके, हेडर और हेडर में टेक्स्ट के लिए अलग-अलग ट्रांज़िशन एलिमेंट बनाए हैं. ये सैद्धांतिक तौर पर, डीओएम बदलाव से पहले और बाद में एक ही एलिमेंट हैं. हालांकि, ऐसे मामलों में ट्रांज़िशन बनाए जा सकते हैं, जहां ऐसा नहीं होता.

उदाहरण के लिए, मुख्य वीडियो एम्बेड को view-transition-name दिया जा सकता है:

.full-embed {
  view-transition-name: full-embed;
}

फिर, जब थंबनेल पर क्लिक किया जाता है, तब उसे ट्रांज़िशन के दौरान वही view-transition-name दिया जा सकता है:

thumbnail. () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

नतीजा:

थंबनेल अब मुख्य इमेज में बदल जाएगा. भले ही, ये सैद्धांतिक तौर पर (और वाकई) अलग-अलग एलिमेंट हैं, लेकिन ट्रांज़िशन एपीआई इन्हें एक जैसा ही मानता है, क्योंकि दोनों के साथ एक ही view-transition-name शेयर किया गया है.

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

कस्टम एंट्री और एग्ज़िट ट्रांज़िशन

इस उदाहरण पर एक नज़र डालें:

साइडबार, ट्रांज़िशन का हिस्सा है:

.sidebar {
  view-transition-name: sidebar;
}

हालांकि, पिछले उदाहरण में दिए गए हेडर के उलट, साइडबार सभी पेजों पर नहीं दिखता है. अगर दोनों राज्यों में साइडबार मौजूद है, तो ट्रांज़िशन के छद्म-एलिमेंट इस तरह दिखेंगे:

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

हालांकि, अगर साइडबार सिर्फ़ नए पेज पर है, तो ::view-transition-old(sidebar) स्यूडो-एलिमेंट वहां नहीं होगा. साइडबार के लिए कोई 'पुरानी' इमेज नहीं है, इसलिए इमेज-पेयर में सिर्फ़ एक ::view-transition-new(sidebar) होगा. इसी तरह, अगर साइडबार सिर्फ़ पुराने पेज पर है, तो इमेज-पेयर में सिर्फ़ ::view-transition-old(sidebar) होगा.

पिछले डेमो में, साइडबार का ट्रांज़िशन इन दोनों स्थितियों में अलग-अलग हो सकता है. यह दाईं से स्लाइड करके अंदर जाता है और फ़ेड होकर बाहर निकल जाता है. ऐसा करने के लिए, वह दाईं ओर स्लाइड करता है और फ़ेड आउट होता है. हालांकि, यह दोनों स्थितियों में मौजूद होने पर अपनी जगह पर ही रहता है.

कोई खास एंट्री और एग्ज़िट ट्रांज़िशन बनाने के लिए, :only-child स्यूडो क्लास का इस्तेमाल करें. इससे पुराने या नए छद्म एलिमेंट को टारगेट किया जा सकता है. ऐसा तब किया जा सकता है, जब इमेज-पेयर में यह इकलौता चाइल्ड हो:

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

इस मामले में, दोनों स्थितियों में साइडबार के मौजूद होने पर कोई खास ट्रांज़िशन नहीं होता है. ऐसा इसलिए, क्योंकि डिफ़ॉल्ट तौर पर सेट ही सही रहेगा.

एक साथ काम नहीं करने वाले डीओएम अपडेट और कॉन्टेंट का इंतज़ार किया जा रहा है

.startViewTransition() को पास किया गया कॉलबैक, प्रॉमिस को रिटर्न कर सकता है. इससे DOM अपडेट को एक साथ सिंक किया जा सकता है और ज़रूरी कॉन्टेंट के तैयार होने का इंतज़ार किया जा सकता है.

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

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

अगर आपने इमेज या फ़ॉन्ट के तैयार होने का इंतज़ार किया है, तो पक्का करें कि आपने टाइम आउट को ज़्यादा समय तक प्रोसेस करने का विकल्प चुना है:

const wait = ms => new Promise(r => setTimeout(r, ms));

document.startViewTransition(async () => {
  updateTheDOMSomehow();

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

हालांकि, कुछ मामलों में ऐसा करने से पूरी तरह बचा जा सकता है और पहले से मौजूद कॉन्टेंट का ही इस्तेमाल किया जा सकता है.

अपने मौजूदा कॉन्टेंट का पूरा फ़ायदा पाएं

ऐसे मामले में, जहां थंबनेल बड़ी इमेज पर बदलता है:

डिफ़ॉल्ट ट्रांज़िशन, क्रॉस-फ़ेड होता है. इसका मतलब है कि थंबनेल, अभी तक लोड न की गई पूरी इमेज के साथ क्रॉस-फ़ेड हो सकता है.

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

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

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

अगर नए व्यू में पारदर्शिता को दिखाया जाता है, तो यह काम नहीं करेगा. हालांकि, इस मामले में हम जानते हैं कि ऐसा नहीं है, इसलिए हम यह ऑप्टिमाइज़ेशन कर सकते हैं.

आसपेक्ट रेशियो में बदलावों को हैंडल करना

आसानी से, अब तक के सभी ट्रांज़िशन एक जैसे आसपेक्ट रेशियो वाले एलिमेंट पर किए गए हैं. हालांकि, हमेशा ऐसा नहीं होगा. अगर थंबनेल 1:1 और मुख्य इमेज 16:9 है, तो क्या होगा?

डिफ़ॉल्ट ट्रांज़िशन में, ग्रुप का ऐनिमेशन, पहले के साइज़ से लेकर बाद के साइज़ में बदल जाता है. पुराने और नए व्यू, ग्रुप की 100% चौड़ाई और ऑटो लंबाई हैं. इसका मतलब है कि ग्रुप का साइज़ चाहे कुछ भी हो, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखा जाता है.

डिफ़ॉल्ट तौर पर सेट किया गया यह एक अच्छा तरीका है. हालांकि, इस मामले में ऐसा नहीं किया जाना चाहिए. इसलिए:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

इसका मतलब है कि चौड़ाई बढ़ने पर थंबनेल, एलिमेंट के बीच में दिखता है. हालांकि, 1:1 से 16:9 में बदलने पर, पूरी इमेज 'अन-क्रॉप' होती है.

ज़्यादा जानकारी के लिए, (ट्रांज़िशन देखें: आसपेक्ट रेशियो में हुए बदलावों को मैनेज करना)(https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-Change/)

डिवाइस की अलग-अलग स्थितियों के हिसाब से ट्रांज़िशन बदलने के लिए, मीडिया क्वेरी का इस्तेमाल करें

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

इसे सामान्य मीडिया क्वेरी का इस्तेमाल करके हासिल किया जा सकता है:

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

मिलती-जुलती मीडिया क्वेरी के आधार पर, आपके पास उन एलिमेंट को बदलने का भी विकल्प है जिन्हें view-transition-name असाइन किया जाता है.

'घटा हुआ मोशन' प्राथमिकता पर प्रतिक्रिया दें

उपयोगकर्ता यह बता सकते हैं कि उन्हें अपने ऑपरेटिंग सिस्टम पर कम मोशन का इस्तेमाल करना है. यह दिलचस्पी सीएसएस में दिखती है.

आपके पास इन उपयोगकर्ताओं के लिए, किसी भी तरह का ट्रांज़िशन रोकने का विकल्प है:

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

हालांकि, 'कम मोशन' की प्राथमिकता का मतलब यह नहीं है कि उपयोगकर्ता कोई मोशन नहीं चाहता. पिछले स्निपेट के बजाय, आपके पास ज़्यादा बारीक ऐनिमेशन चुनने का विकल्प होता है, लेकिन ऐसा ऐनिमेशन भी चुना जा सकता है जो एलिमेंट और डेटा के फ़्लो के बीच संबंध को साफ़ तौर पर दिखाता हो.

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

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

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

एक ही दस्तावेज़ के व्यू ट्रांज़िशन में टाइप इस्तेमाल करने के लिए, आपको startViewTransition तरीके में types पास करना होता है. इसकी अनुमति देने के लिए, document.startViewTransition किसी ऑब्जेक्ट को भी स्वीकार करता है: update एक कॉलबैक फ़ंक्शन है, जो डीओएम को अपडेट करता है. साथ ही, types टाइप वाला कलेक्शन है.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

इन टाइप का जवाब देने के लिए, :active-view-transition-type() सिलेक्टर का इस्तेमाल करें. जिस type को टारगेट करना है उसे सिलेक्टर में पास करें. इसकी मदद से, कई व्यू ट्रांज़िशन की स्टाइल को एक-दूसरे से अलग रखा जा सकता है. साथ ही, यह एलान नहीं किया जाता कि कोई एक व्यू, दूसरे के एलान में रुकावट डालेगा.

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

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

नीचे दिए गए पेज पर नंबर दिखाने के डेमो में, पेज का कॉन्टेंट उस पेज नंबर के आधार पर आगे या पीछे की ओर स्लाइड होता है जिस पर नेविगेट किया जा रहा है. टाइप, क्लिक के आधार पर तय किए जाते हैं और उन्हें document.startViewTransition में भेजा जाता है.

किसी भी ऐक्टिव व्यू ट्रांज़िशन को टारगेट करने के लिए, उसके बजाय :active-view-transition स्यूडो-क्लास सिलेक्टर का इस्तेमाल किया जा सकता है. भले ही, ट्रांज़िशन का कोई भी टाइप हो.

html:active-view-transition {
    …
}

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

कभी-कभी एक खास तरह के व्यू से दूसरे व्यू पर जाने के लिए, खास तौर पर तैयार किया गया ट्रांज़िशन होना चाहिए. इसके अलावा, 'वापस जाएं' वाला नेविगेशन, 'फ़ॉरवर्ड' नेविगेशन से अलग होना चाहिए.

इन मामलों को ट्रांज़िशन के टाइप से पहले, ट्रांज़िशन रूट पर कुछ समय के लिए क्लास का नाम सेट करना होता है. document.startViewTransition को कॉल करते समय, यह ट्रांज़िशन रूट <html> एलिमेंट है. इसे JavaScript में document.documentElement का इस्तेमाल करके ऐक्सेस किया जा सकता है:

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

ट्रांज़िशन पूरा होने के बाद क्लास को हटाने के लिए, यह उदाहरण transition.finished का इस्तेमाल करता है. यह एक प्रॉमिस है. यह ट्रांज़िशन के खत्म होने के बाद रिज़ॉल्व होता है. इस ऑब्जेक्ट की अन्य प्रॉपर्टी, एपीआई के रेफ़रंस में शामिल हैं.

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

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

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

अन्य ऐनिमेशन को फ़्रीज़ किए बिना ट्रांज़िशन चलाएं

वीडियो ट्रांज़िशन की पोज़िशन का यह डेमो देखें:

क्या आपको कोई गड़बड़ी मिली? अगर आपने नहीं देखा है, तो चिंता न करें. यहां, इसकी रफ़्तार कम हो गई है:

ट्रांज़िशन के दौरान, वीडियो फ़्रीज़ हो जाता है. इसके बाद, वीडियो चलने वाला वर्शन धुंधला हो जाता है. ऐसा इसलिए होता है, क्योंकि ::view-transition-old(video) पुराने व्यू का स्क्रीनशॉट है, जबकि ::view-transition-new(video) नए व्यू का लाइव इमेज है.

आप इसे ठीक कर सकते हैं, लेकिन पहले खुद से पूछें कि क्या इसे ठीक करना सही होगा. जब ट्रांज़िशन अपनी सामान्य रफ़्तार पर चल रहा था, तब अगर आपको यह समस्या नहीं दिखे, तो मुझे इसे बदलने में कोई परेशानी नहीं होगी.

अगर आपको वाकई इस समस्या को ठीक करना है, तो ::view-transition-old(video) न दिखाएं. सीधे ::view-transition-new(video) पर स्विच करें. डिफ़ॉल्ट स्टाइल और ऐनिमेशन को बदलकर ऐसा किया जा सकता है:

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

यह बहुत आसान है!

अब वीडियो, ट्रांज़िशन के दौरान चलता है.

JavaScript का इस्तेमाल करके ऐनिमेट करना

अब तक, सभी ट्रांज़िशन को सीएसएस का इस्तेमाल करके तय किया गया है. हालांकि, कभी-कभी सीएसएस काफ़ी नहीं है:

इस ट्रांज़िशन के कुछ हिस्सों को सिर्फ़ सीएसएस का इस्तेमाल करके पूरा नहीं किया जा सकता:

• ऐनिमेशन, क्लिक करने की जगह से शुरू होता है.
• ऐनिमेशन, उस सर्कल के साथ खत्म होता है जिसमें सबसे दूर के कोने तक का दायरा होता है. हालांकि, हमें उम्मीद है कि आने वाले समय में सीएसएस के साथ ऐसा किया जा सकेगा.

अच्छी बात यह है कि आप Web Animation API का इस्तेमाल करके, ट्रांज़िशन तैयार कर सकते हैं!

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

इस उदाहरण में, transition.ready का इस्तेमाल किया गया है. यह एक प्रॉमिस है. यह ट्रांज़िशन छद्म एलिमेंट के बनने के बाद हट जाता है. इस ऑब्जेक्ट की अन्य प्रॉपर्टी, एपीआई के रेफ़रंस में शामिल हैं.

बेहतर बनाने की सुविधा के तौर पर ट्रांज़िशन

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

ट्रांज़िशन को बेहतर बनाने के लिए, इस बात का ध्यान रखें कि ट्रांज़िशन के वादों का इस्तेमाल इस तरह न करें कि ट्रांज़िशन पूरा न होने पर, आपका ऐप्लिकेशन काम करना बंद कर दे.

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

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

इसके बजाय:

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

इस उदाहरण में, DOM अपडेट का इंतज़ार करने के लिए transition.updateCallbackDone का इस्तेमाल किया गया है. अगर ऐसा नहीं होता है, तो उसे अस्वीकार किया जाता है. ट्रांज़िशन पूरा न होने पर, switchView अस्वीकार नहीं करता. DOM अपडेट पूरा होने पर यह ठीक हो जाता है और पूरा न होने पर अस्वीकार कर दिया जाता है.

अगर आपको यह सेट करना है कि नए व्यू के 'सेट किए जाने' के बाद, switchView का समाधान हो जाए, जैसे कि ऐनिमेशन वाला कोई ट्रांज़िशन पूरा हो गया हो या उसे आखिर तक स्किप कर दिया गया हो, तो transition.updateCallbackDone को transition.finished से बदलें.

पॉलीफ़िल नहीं, लेकिन...

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

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

और इसका इस्तेमाल इस तरह किया जा सकता है:

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

जिन ब्राउज़र में व्यू ट्रांज़िशन की सुविधा काम नहीं करती उनमें अब भी updateDOM को कॉल किया जाएगा. हालांकि, ऐनिमेशन वाला ट्रांज़िशन नहीं होगा.

ट्रांज़िशन के दौरान, <html> में जोड़ने के लिए कुछ classNames भी दिए जा सकते हैं. इससे नेविगेशन के टाइप के हिसाब से ट्रांज़िशन को बदलना आसान हो जाएगा.

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

फ़्रेमवर्क के साथ काम करना

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

• प्रतिक्रिया—यहां सबसे अहम चीज़ flushSync है. यह स्थिति में होने वाले किसी भी बदलाव को एक साथ लागू करती है. हां, उस एपीआई का इस्तेमाल करने के बारे में एक बड़ी चेतावनी दी जाती है. हालांकि, Dan Abramov मुझे इस बात का भरोसा दिलाता है कि इस मामले में यह सही है. हमेशा की तरह, प्रतिक्रिया और एक साथ काम नहीं करने वाले कोड के साथ, startViewTransition से मिले अलग-अलग प्रॉमिस का इस्तेमाल करते समय इस बात का ध्यान रखें कि आपका कोड सही स्थिति के साथ चल रहा हो.
• Vue.js—यहां दी गई कुंजी nextTick है, जो डीओएम के अपडेट होने के बाद काम करती है.
• Svelte—यह Vue से काफ़ी मिलता-जुलता है, लेकिन अगले बदलाव का इंतज़ार करने का तरीका tick है.
• Lit—यहां सबसे अहम चीज़, कॉम्पोनेंट में दिया गया this.updateComplete प्रॉमिस है. यह डीओएम के अपडेट होने के बाद पूरी होती है.
• Angular—यहां applicationRef.tick कुंजी है, जो बचे हुए DOM बदलावों को फ़्लश करती है. Angular के वर्शन 17 में, @angular/router के साथ मिलने वाले withViewTransitions का इस्तेमाल किया जा सकता है.

एपीआई का संदर्भ

const viewTransition = document.startViewTransition(update)

नया ViewTransition शुरू करें.

update एक फ़ंक्शन है, जिसे दस्तावेज़ की मौजूदा स्थिति कैप्चर करने के बाद कॉल किया जाता है.

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

const viewTransition = document.startViewTransition({ update, types })

बताए गए टाइप के साथ नया ViewTransition शुरू करें

दस्तावेज़ की मौजूदा स्थिति कैप्चर होने के बाद, update को कॉल किया जाता है.

ट्रांज़िशन को कैप्चर या परफ़ॉर्म करते समय, types ट्रांज़िशन के लिए चालू टाइप सेट करता है. शुरुआत में यह खाली है. ज़्यादा जानकारी के लिए, viewTransition.types नीचे देखें.

ViewTransition के सदस्य:

viewTransition.updateCallbackDone

ऐसा प्रॉमिस जो updateCallback के दिए गए प्रॉमिस को पूरा कर लेता है या अस्वीकार करने पर खारिज कर देता है.

व्यू ट्रांज़िशन एपीआई, डीओएम में हुए बदलाव को रैप करता है और ट्रांज़िशन बनाता है. हालांकि, कभी-कभी ट्रांज़िशन ऐनिमेशन की सफलता या असफलता की अहमियत आपको नहीं होती. आपको बस यह जानना होता है कि डीओएम में बदलाव कब होता है या नहीं. updateCallbackDone का इस्तेमाल इस मामले में किया जा सकता है.

viewTransition.ready

यह प्रॉमिस, ट्रांज़िशन के लिए छद्म एलिमेंट के बनने के बाद पूरा होता है. इसके बाद, ऐनिमेशन शुरू होने वाला होता है.

अगर ट्रांज़िशन शुरू नहीं हो सकता, तो यह अस्वीकार कर देता है. ऐसा गलत कॉन्फ़िगरेशन की वजह से हो सकता है, जैसे कि डुप्लीकेट view-transition-name या जब updateCallback अस्वीकार किया गया प्रॉमिस दिखाता है.

यह JavaScript की मदद से, ट्रांज़िशन के छद्म-एलिमेंट को ऐनिमेट करने के लिए फ़ायदेमंद होता है.

viewTransition.finished

ऐसा प्रॉमिस जो एंड स्टेटस के पूरा होने के बाद उपयोगकर्ता को पूरी तरह से दिखने और इंटरैक्टिव होने के बाद पूरा होता है.

यह सिर्फ़ तब अस्वीकार करता है, जब updateCallback अस्वीकार किया गया प्रॉमिस देता है. ऐसा इसलिए, क्योंकि इससे पता चलता है कि प्रॉमिस 'खत्म होने का समय' नहीं बनाया गया था.

अगर ऐसा न हो, तो अगर कोई ट्रांज़िशन शुरू नहीं होता या ट्रांज़िशन के दौरान उसे स्किप कर दिया जाता है, तो भी एंड स्थिति खत्म होती है. इसलिए, finished पूरा करता है.

viewTransition.types

Set जैसा ऑब्जेक्ट, जिसमें ऐक्टिव व्यू ट्रांज़िशन टाइप होल्ड हैं. एंट्री में बदलाव करने के लिए, इसके इंस्टेंस तरीकों clear(), add(), और delete() का इस्तेमाल करें.

सीएसएस में किसी खास टाइप का जवाब देने के लिए, ट्रांज़िशन रूट पर :active-view-transition-type(type) स्यूडो-क्लास सिलेक्टर का इस्तेमाल करें.

व्यू ट्रांज़िशन खत्म होने पर, टाइप अपने-आप हट जाते हैं.

viewTransition.skipTransition()

ट्रांज़िशन के ऐनिमेशन वाले हिस्से को छोड़ें.

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

डिफ़ॉल्ट स्टाइल और ट्रांज़िशन रेफ़रंस

::view-transition

रूट स्यूडो एलिमेंट, जो व्यूपोर्ट को भरता है और इसमें हर ::view-transition-group शामिल होता है.

::view-transition-group

बिलकुल सही जगह पर.

'पहले' और 'बाद' की स्थितियों के बीच width और height का ट्रांज़िशन.

व्यूपोर्ट-स्पेस क्वाड के 'पहले' और 'बाद' के बीच transform ट्रांज़िशन.

::view-transition-image-pair

ग्रुप को भरने के लिए बिलकुल तैयार है.

इसमें isolation: isolate का इस्तेमाल होता है, ताकि पुराने और नए व्यू पर mix-blend-mode के असर को सीमित किया जा सके.

::view-transition-new और ::view-transition-old

रैपर के सबसे ऊपर बाईं ओर मौजूद है.

ग्रुप की चौड़ाई को 100% भरता है, लेकिन इसकी लंबाई अपने-आप सेट हो जाती है. इसलिए, यह ग्रुप को भरने के बजाय, आसपेक्ट रेशियो को बनाए रखेगा.

ट्रू क्रॉस-फ़ेड की अनुमति देने के लिए mix-blend-mode: plus-lighter मौजूद है.

पुराना व्यू, opacity: 1 से opacity: 0 में बदल जाएगा. नया व्यू, opacity: 0 से opacity: 1 में बदल जाएगा.

सुझाव/राय दें या शिकायत करें

डेवलपर के सुझाव, शिकायत या राय को हमेशा अहमियत दी जाती है. ऐसा करने के लिए, GitHub पर सीएसएस वर्किंग ग्रुप को समस्या बताएं और सुझाव दें. साथ ही, सवाल पूछें. [css-view-transitions] में अपनी समस्या लगाएं.

अगर आपको कोई गड़बड़ी मिलती है, तो इसके बजाय Chromium की गड़बड़ी की शिकायत करें.